IE8 이미지 미리로드 - jQuery -로드 된 후 작업하기

Question

나는 사진 갤러리 웹 사이트가 있습니다. 사용자가 미리보기 이미지를 클릭하기 전에 미리로드 할 17 개의 큰 이미지가 있습니다. 아이디어는 최종 이미지가로드 될 때 페이지를 표시하고 사용자가 미리보기 이미지를 클릭 할 때 보여줄 큰 이미지가 있고로드되지 않도록하는 것입니다. $ .getScript() 호출에서 JSON-P와 비슷한 데이터를 검색 할 때까지 이미지 URL을 알지 못합니다.

그래서, http://www.stephentang.net/j/photoModule.js

나는 약간을 console.log() 문을 뒀다

$.each(self.jsonObj.imageItems, function(index) { 
    $("<img />").attr("src", STP.HOSTNAME + self.jsonObj.imageItems[index].imgSrc).load(function() { 
    num_left_to_load = num_left_to_load - 1; 
    console.log('Left to Load: ' + num_left_to_load); 
    if (num_left_to_load <= 0) { 
     if (typeof callback === "function") { 
      console.log('callback is triggered'); 
      $("#loading-div").remove(); 
      self.jqFilmstrip.css('display', 'block'); 
      self.jqFeaturedPhotoImg.css('display', 'block'); 
      callback.apply(context); 
     } 
    } 
    }); 
}); 

에서이 코드가 있습니다. FF3.5 + 및 Safari에서는 num_left_to_load가 0에 도달하여 콜백 함수가 실행됩니다. IE8 (및 IE7)에서는 num_left_to_load가 0에 도달하지 않습니다. 결과적으로 페이지가 "Loading ..."메시지에서 멈 춥니 다.

플러그인 솔루션을 찾고 있지 않습니다.

읽어 주셔서 감사합니다.

편집 : "로드 중 ..."메시지가 삭제되어 더 이상 페이지가 숨겨지지 않습니다. IE8에서는 첫 번째로드 이후 이미지가 캐시되므로 load() 메서드가 작동하지 않는 것처럼 보입니다. 카운터가 0에 도달하지 못하는 결과를 초래합니다.

EDIT : window.ready()를 시도했지만 창은 매우 빨리로드됩니다.

편집 : 첫 번째로드시 IE6-8 캐시 이미지가 표시되고 아웃 바운드 요청을 만들기 전에 캐시를 확인하므로 .load()가 일관되게 작동하지 않습니다.

Answer 1

코드를 $(window).ready(function(){...});에 넣으 려합니다. 코드를 실행하기 전에 모든 이미지가로드 될 때까지 기다립니다.