image.onload 在 IE7 中没有触发两次答案

【问题标题】：image.onload not firing twice in IE7image.onload 在 IE7 中没有触发两次
【发布时间】：2009-06-24 13:27:46
【问题描述】：

它适用于 IE6 和 FireFox；但由于某种原因不在 IE7 中。

在 Page_Init 上使用 ASP.NET 我填充了一个章节列表，这些章节是指向书中图片的链接，以及一个保存 pageID 的 Javascript 数组。

例如

第 1 章 --> href="javascript:seePage(4);"

这是我正在使用的实际代码：


var availablePages = ['1002_001','1002_002','1002_003','1002_004','1002_005'];

function seePage(index) {
    $get('imgSingle').src = 'graphics/loading.gif';
    var img = new Image();
    img.src = 'get.jpg.aspx?size=single&id=' + availablePages[index];
    img.onload = function() {
         var single = $get('imgSingle');
         single.src = img.src;
    }
}

当我点击第 1 章时，图像可以正常加载（IE6、7、FF）并且点击第二章链接也可以；但是，在（并且仅在）IE7 中，两次单击同一章节（chap1、chap2，然后再次单击 chap1）图像是否会卡在“正在加载”图像上...

【问题讨论】：

我喜欢交换图片的jquery插件code.google.com/p/jquery-swapimage

标签： javascript dom-events internet-explorer-7

【解决方案1】：

这是因为IE会缓存图片，加载后onload事件永远不会触发。

您需要将 onload 事件放在 src 之前。

var availablePages = ['1002_001','1002_002','1002_003','1002_004','1002_005'];

function seePage(index) {
    $get('imgSingle').src = 'graphics/loading.gif';
    var img = new Image();
    img.onload = function() {
         var single = $get('imgSingle');
         single.src = img.src;
    }
    img.src = 'get.jpg.aspx?size=single&id=' + availablePages[index];
}

【讨论】：

愿上帝赐福给您无限的啤酒先生。

【解决方案2】：

另一种方法是检查图像是否已经加载了image.complete。例如：

var img = new Image();
img.src = 'foo.jpg';
if(img.complete){
    img.onload = function(){ /* ... */ };
} else {
    /* execute something else, or the same. */
}

我在 IE6 和 7 中遇到过这种行为。

【讨论】：