6

編集:問題はIE image.load()の起動とは関係がないため、タイトルを変更しました-私のsubstr()は機能していませんでした(受け入れられた回答を参照)。

画像が最初にキャッシュからロードされた場合にオンロード ハンドラが適切に配置されていることを保証するために、 img.src を割り当てる前にオンロード ハンドラを定義することを確認することに関する投稿がたくさんあります。

これはまさに私が行ったことであるため、私のコードでは問題にはなりません。

このスクリプトは他のすべてのブラウザーで機能しますが、IE 8 以前では onload インライン関数がトリガーされないことに注意してください。

var i = lastSlideIndex || 1;

while(imagesQueued < MAX_IMAGES){
    var preloadImage = new Image();
    preloadImage.arrayIndex = i;
    preloadImage.onload = function(eventObj){
        debug('Image ' + this.src + ' loaded.');
        slideshowImages[this.arrayIndex] = this;
        if (this.arrayIndex > lastImageIndex) lastImageIndex = this.arrayIndex;
        triggerSlideshow(this.arrayIndex);
    }

    // add leading zeros
    var leadingZeros = "0000000".substr(-(String(MAX_IMAGES).length));
    imageNumber = leadingZeros.substr(String(i).length) + i;

    debug('preloading Image #' + imageNumber);
    preloadImage.src = fullImagePrefix + imageNumber + "." + IMAGES_TLA;

    if (++i > MAX_IMAGES) i = 1;
    imagesQueued++;
}

他の提案をいただければ幸いです。

4

3 に答える 3

9

更新:コメント投稿者が指摘したように (そして、今のところそれ以外のことを証明することはできません)、最初の提案を削除しました。

さらに注意すべき点がいくつかあります。

onload画像がキャッシュから読み込まれている場合、イベントは発生しません。キャッシュをクリアして再試行してください。

もう 1 つの問題は、IE が .NET のネガを好まないことsubstrです。slice代わりに使用してください:

"0000000".slice(-(String(MAX_IMAGES).length));
于 2011-08-02T21:38:14.083 に答える
1

これに対処するには、次の 2 つの方法があります。

  1. 画像 URL にノンス パラメータを追加します。

    var nonce = new Date().getTime();

// ...

preloadImage.src = fullImagePrefix + imageNumber + "." + IMAGES_TLA + ('?_=' + nonce++);

  2. 別のイベント ループで「src」プロパティを設定します。

    setTimeout(function(img, src) {
  img.src = src;
}(preloadImage, fullImagePrefix + imageNumber + "." + IMAGES_TLA), 1);

画像を取得するたびに nonce パラメータを使用することで、キャッシュをバイパスします。これはあまり良いアイデアではないので、2 番目のオプションでは、「src」プロパティを別のイベント ループで設定することで問題を回避します。その後、「ロード」がトリガーされます。

ここに例があります。このコードは一部の画像でナンスを使用していますが、タイムアウト ハンドラでそれらすべてに「src」を設定しています。ご覧のとおり、すべてロードされます (赤くなります)。

画像がキャッシュにあるときにIEが「ロード」ハンドラーを起動しない理由はわかりませんが、画像オブジェクトが（そうでなければ）初期化される場所とは異なるイベントループで「src」が設定されている場合は起動します。

編集—これは同じフィドルですが、タイムアウトをスキップするように変更されています。IE8 では、偶数番号の画像は「ロード」ハンドラを呼び出さないことが多いことに注意してください。

于 2011-08-02T22:21:52.693 に答える