[JavaScript] image refresh 오류

[JavaScript] image refresh 오류

---

웹에서 같은 url(src)를 갖는 이미지를 재로드 하면 

변경된 이미지가 아닌 변경 전 즉, 이전 이미지를 불러온다.

 

예를들어,

A라는 이미지를 웹에서 불러온 후, A 이미지를 바꿀 경우.

전체 페이지를 새로고침하거나 웹을 재시작하지 않고, 이미지만 부분 새로고침 할 경우

A 이미지는 변경된 이미지가 아닌 이전 이미지가 보여진다.

 

아마 캐시에 쌓아둔 듯 하다.

 

처음엔 Electron 언어 자체의 문제인줄 알고,

아래와 같이 cache를 삭제해 보았지만 효과가 없었고,

console로 cache를 확인해 보니 캐시는 항상 비워져 있었다.

var remote = require('remote'); 
var win = remote.getCurrentWindow(); 
win.webContents.session.clearCache(function(){ 
    //some callback. 
});

 

Electron의 캐시가 아니고 웹 자체의 캐시에 쌓이는 듯 하다.

그래서 이미지를 불러올 때 path에 "?고유값" 형식의 cachebreaker 를 추가하니 해결되었다.

img.src = "http://localhost/image.jpg?" + new Date().getTime();

 

 

 

테스트 코드

 

* 테스트 코드 사용 방법 (npm필요)

  1. git clone

  2. npm 패키지 설치

     npm install

  3. 일렉트론 실행

      electron .  

  4. finder.js 의 item.dataset.path 부분에 cachebreaker를 수정해 보면 된다.

 

---

[참고] https://stackoverflow.com/questions/1077041/refresh-image-with-a-new-one-at-the-same-url