크롬/Firefox 캐시 된 이미지 문제

Question

이미지를 미리로드하고 즉시 요소를 만들 때 문제가 있습니다. 스크립트는 이미지 URL의 목록을로드하고 캔버스 요소 등을 만듭니다.

문제는 이후의 "소프트"새로 고침 또는 동일한 URL 제출에 프리로드 루프가 시작되지 않으므로 캔버스 요소 등이 만들어진. 나는 이것이 리소스 캐싱과 관련이 있다는 것을 확신합니다. 그러나 스크립트가 이미지 URL 목록을 반복하고 예상대로 DOM을 빌드하지 않는 이유는 무엇입니까? Here's an example

페이지가 출력을 최적화되어 있지만, 프리로드 루프는 다음과 같습니다

// Images array 
var images = []; 

for (var i = 0; i < l.length; ++i) { 
    // Create canvas element 
    var canvas = document.createElement('canvas'); 
    // Canvas element properties 
    canvas.width = l[i].w; 
    canvas.height = l[i].h; 
    canvas.style.display = 'none'; 
    // Image element + mouse over event 
    images[i] = document.getElementById('i' + i).getElementsByTagName('img')[0]; 
    images[i].addEventListener('mouseover', function() { 
     handleCanvas(this); 
    }, false); 
    // Push canvas into DOM 
    images[i].parentNode.insertBefore(canvas, images[i]); 
    // Preload item from processed images list 
    var image = new Image; 
    image.src = l[i].i; 
} 

나는 헤더 또는 "? URL 임의 = 37436464"타입의 수정 가능한 경우에 의지하지 않으려는 것입니다. Ubuntu 12.10에서 Chrome 및 Firefox의 야간 버전에서 테스트되었습니다.

Answer 1

추가 조사 (IE9에서 테스트) 후 자바 스크립트를 비동기 적으로로드하고 변수 시작을 지연함으로써 문제가 발생한 것으로 보입니다.