IE8 图像预加载 -jQuery - 加载后执行的操作

Question

我有一个照片库网站。在允许用户单击任何缩略图之前，我要预加载 17 张大图像。这个想法是，当最终图像被加载时，我可以显示页面并确保当用户单击缩略图时，有一个大图像要显示（而不是仍在加载）。在我从 $.getScript() 调用中检索类似 JSON-P 的数据之前，我不知道图像 URL。

所以，我有这个代码 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...”消息中。

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

感谢您的阅读。

编辑：我已删除“正在加载...”消息并且不再隐藏该页面。好像在 IE8 中，第一次加载后，图片被缓存了，所以 load() 方法似乎不起作用，仍然导致计数器没有达到 0。

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

编辑：第一次加载时出现 IE6-8 缓存图像，然后在发出出站请求之前检查缓存，因此 .load() 无法始终对它们起作用。

Answer 1

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