자바스크립트로 이미지 새로고침 하기

오늘 IE 관련 이미지 표시가 안되는 문제를 해결하다가,

imagesLoaded 플러그인이 IE에서 제대로 작동하지 않는다는 사실을 발견하였다.

(미쿡에서는 그닥 크게 신경 쓰지 않는 듯하다. 실제로 http://masonry.desandro.com/demos/images.html

에 가보면 현재도 IE에서 계속해서 문제가 발생한다.)

국내에서는 IE를 무시 할 수 없기에, 임시 방편으로 이미지를 새로고침해서 보정해주는 편법을 사용 하였는데,

(jQuery로 이미지 태그의 경로를 $('img').removeAttr('src').attr('src','test.jpg'); 이런 식으로 해주면 

이미지 새로고침이 이루어진다. )

그런데, 위 문제에선 중요한건 아니지만 크롬에서는 새로고침이 되지 않는 문제가 있었다.

검색해서 찾아보니, 크롬은 이미지가 새 주소가 아니면 이미지를 새로 불러오지 않는 특징이 있었다.

src를 제거하고, 다시넣든, 새로넣든 바뀌지 않는다.

이런 경우에는 이미지에 매개변수를 주어 다른 이미지인 것처럼 해 주면 된다.

$('img').removeAttr('src').attr('src','test.jpg'+'?number='+Math.random()*1000) ;

다음과 같이 하면 크롬에서도 새로고침이 잘 되는 것을 확인 할 수 있다.