심재운 블로그

 

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"

이 글을 공유합시다

facebook twitter kakaoTalk kakaostory naver band

본문과 관련 있는 내용으로 댓글을 남겨주시면 감사하겠습니다.

비밀글모드