IE7でimage.onloadが2回起動しない
-
10-07-2019 - |
質問
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)、第2章のリンクをクリックしても機能します。ただし、IE7では同じチャプターを2回クリックするだけで(chap1、chap2、chap1の順にクリックします)、イメージが「読み込み中」のイメージに引っかかってしまいます...私はここで髪を引き出しています。 。
解決
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];
}
他のヒント
これを行うもう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でこの動作を経験しました
所属していません StackOverflow