같은 이름의 이미지를 교체 하거나 .attr을 사용하여 image src를 바꿀 때 서버에 캐시 되어있는 기존 이미지 때문에
이미지가 그대로 보이는 경우가 있다.
1. 같은 이름
<img id="foo" src="/aaa/foo.jpg"> -> original image
~~~
(image overwrite)
~~~
<img id="foo" src="/aaa/foo.jpg"> -> changed image, same name
--------------------------------------------------------------
2. 다른 이름
html
<img id="foo" src="/aaa/foo.jpg">
script
$("#foo").attr("src","/aaa/foo2.jpg");
foo.jpg -> foo2.jpg로 바꾼다고 가정할 때 캐시된 이미지 때문에 안바뀌는 경우
-------------------------------------------------------------
3. 해결방법
var date = new Date();
1. $("#foo").attr("src","/aaa/foo.jpg?" + date.getTime() );
2. $("#foo").attr("src","/aaa/foo2.jpg?" + date.getTime() );
같은 이름의 이미지를 덮어 쓴 후 이미지를 새로 고치고 싶을 때나 파일명이 바뀌었지만 기존 이미지 캐시가 남아있는 경우
위와 같이 바꿔주면 이미지가 새로고침된다.