IE7でimage.onloadが2回起動しない

Question

IE6およびFireFoxで動作します。しかし、何らかの理由でIE7にはありません。

Page_InitでのASP.NETの使用本の画像へのリンクである章のリストと、pageIDを保持するjavascript配列を作成します。

例

第1章-＆gt; href =＆quot; javascript：seePage（4）;＆quot;

ここで使用している実際のコードは次のとおりです。

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では同じチャプターを2回クリックするだけで（chap1、chap2、chap1の順にクリックします）、イメージが「読み込み中」のイメージに引っかかってしまいます...私はここで髪を引き出しています。 。

Answer 1

IEが画像をキャッシュし、onloadイベントが既に読み込まれた後に発生しないために発生します。

srcの前にonloadイベントを配置する必要があります。

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

Answer 2

これを行うもう1つの方法は、イメージが既に 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でこの動作を経験しました