웹브라우저의 image 캐시(cache) 를 javascript 로 해결하는 방법

 

html 내부에 이미지가 존재하는데 브라우저 캐시로 인해 동일한 이미지명을 새로운 이미지로 변경할때는 캐시로 인해 반영되지 않습니다. 이를 위해서 뒤에 파라미터 넣어서 항상 서버로 부터 이미지 경로를 호출해서 바인딩 하는 방법은 아래와 같이 간단하게 스크립트로 할 수 있습니다.

<div>
    <img class="NO-CACHE" src="images/img1.jpg" />
    <img class="NO-CACHE" src="images/imgLogo.jpg" />
</div>

jQuery

    $(document).ready(function ()
    {           
        $('.NO-CACHE').attr('src',function () { return $(this).attr('src') + "?a=" + Math.random() });
    });

Javascript

var nods = document.getElementsByClassName('NO-CACHE');
for (var i = 0; i < nods.length; i++)
{
    nods[i].attributes['src'].value += "?a=" + Math.random();
}

결과

Result: src="images/img1.jpg" => src="images/img1.jpg?a=0.08749723793963926"