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

我有一个图片库网站。在允许用户单击任何缩略图之前，我要预先加载17个大图像。这个想法是，当加载最终图像时，我可以显示页面并确保当用户单击缩略图时，会显示一个大图像（并且不会继续加载）。直到从$ .getScript（）调用中检索到类似JSON-P的数据时，我才知道图像URL。IE8图像预加载-jQuery - 加载后做的东西

所以，我在 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（）不一致地工作在他们身上。

来源

2011-08-17 Stephen

你想包装你的代码在$(window).ready(function(){...});这将等待所有的图像加载之前运行其中的代码。

来源

2011-08-17 16:30:15 maxedison

这似乎不起作用，因为当我尝试预载更多图像时窗口已经加载。 – Stephen

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

回答

相关问题