Javascript 为什么 IE 不执行这段代码？

Question

总而言之，我正在制作一个有菜单的网站 (http://euroscala.balkanium.com/)，当您单击菜单项时，应该会出现一个缩略图列表。我正在尝试预加载所有应该出现的图像，然后显示它们。它在除 IE(我有版本 8)之外的所有浏览器上都可以正常工作。我已经为任何愿意看这里的人整理了代码:http://jsfiddle.net/THpgM/2/

我认为问题在于这段代码(靠近 fiddle 中第一个函数的底部)

img.onload = (function(i){ 
  // code here is executed

  return function(){
    // code here is not

    ++totalLoaded;
    document.getElementById("li" + i).style.height = this.height + "px";
    document.getElementById("li" + i).setAttribute("data-height", this.height);

    if(totalLoaded == totalThumbs){
      // do some stuff
    }
  };
})(i);

我花了大约 2 天的时间来解决这个问题。如果有人可以帮助我，我将不胜感激。

Answer 1

在 IE 中，您必须在分配 .src 之前分配 .onload 处理程序。如果您不这样做，那么 onload 事件可能会在您的 onload 处理程序到位之前触发，您将错过该事件。

// assign .onload before .src
img.onload = function() {};
img.src = "xxx.jpg";

如果图像在浏览器缓存中(因此它们会在分配 .src 时立即加载)并且您的 onload 处理程序永远不会执行，那么 IE 中的特殊问题将会发生。

因此，在您的 jsFiddle 中，将对 .src 的赋值移动到对 .onload 的赋值之后。