IE8图像预加载- jquery -在加载后做一些事情

Question

我有一个图片库网站。在允许用户点击任何缩略图之前，我想预加载17个大图像。我们的想法是，当加载最终图像时，我可以显示页面，并确保当用户单击缩略图时，有一个大图像要显示(并且还没有加载)。我不知道图像url，直到我从$. getscript()调用中检索JSON-P类数据。

我有这段代码http://www.stephentang.net/j/photoModule.js

$.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);
       }
     }
  });
});

我放了一些console.log()语句。在FF3.5+和Safari中，num_left_to_load达到0，这将触发回调函数。在IE8(可能还有IE7)中，num_left_to_load永远不会达到0。结果，页面卡在"Loading…"消息中。

我不是在寻找插件解决方案。

感谢您的阅读。

编辑:我已经删除了"Loading…"消息，不再隐藏页面。似乎在IE8中，第一次加载后，图像被缓存，因此load()方法似乎不起作用，仍然导致计数器未达到0。

编辑:我尝试了window.ready()，但是窗口加载得非常快。

编辑:它似乎是IE6-8缓存图像在第一次加载，然后检查缓存之前做出出站请求，所以.load()不一致地工作在他们。

Answer 1

你想在$(window).ready(function(){...});中包装你的代码，它将等待所有图像加载，然后运行其中的代码