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.因此，页面卡在“正在加载...”消息中。

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

感谢您的阅读。

编辑：我删除了“正在加载...”消息，不再隐藏页面。似乎在IE8中，第一次加载后，图像被缓存，因此load（）方法似乎不起作用，仍导致计数器未达到0.

编辑：我试过了window.ready（），但是窗口很快加载了。

编辑：在第一次加载时出现IE6-8缓存图像，然后在发出出站请求之前检查缓存，因此.load（）不能始终如一地处理它们。

Answer 1

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

IE8图像预加载-jQuery - 加载后做的东西

1 个答案: