javascript - image.onload 在 IE7 中不触发两次

Question

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

在 Page_Init 上使用 ASP.NET 我填充了一个章节列表，这些章节是指向书中图像的链接以及一个保存页面 ID 的 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)上都可以正常加载，并且单击第 2 章链接也可以；但是，在(并且仅在)IE7 中，两次单击同一章节(第 1 章、第 2 章，然后再次第 1 章)图像是否卡在“正在加载”图像上...

Answer 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];
}