3

画像のURLのリストを受け取りましたが、現在、ページにいくつかの非表示のimg要素があります（リスト内のURLごとに1つ）。ページの読み込みが完了したら、JavaScriptを使用して画像を確認し、壊れていない最初の画像を表示します（つまり、myImage.style.display = "inline"を設定します）。これは非常に簡単です。ただし、すべての画像をリクエストする必要があります。

私がやりたいのは、各画像を一度に1つずつロードして、壊れているかどうかを判断することです。画像が壊れている場合は、次の画像を読み込んでみてください。良ければ表示し、残りは無視してください。（これにより、不要なリクエストの数を節約できます。）

アルゴリズムは十分に簡単ですが、秘訣は画像の読み込み時間です。問題は、isBrokenチェックが発生する前に画像が読み込まれていない可能性があるため、適切な画像が無視される可能性があることです。その場合のアプローチは、imgのonloadイベントとonerrorイベントをソリューションに組み込むことです。

私はここに投稿して、誰かが同様の問題に直面したかどうか、そして彼らの解決策が何であったかを確認します。

ありがとう！

4

1 に答える 1

8

あなたは正しい考えを持っているようです。最初の URL をロードし、onerror プロパティを設定して関数を再度呼び出す関数を作成します。成功したことがわかっているため、実際に画像を表示するように onload 関数を設定できます。

おそらくグローバル変数を取り除きたいと思うでしょうが、アイデアは次のとおりです。

var images = ["bad.jpg", "error.jpg", "good.jpg", "not-tried.jpg"];

function tryNextImage() {
    var url = images.shift();
    if (url) {
        var img = new Image();

        img.onload = function() {
            document.body.appendChild(img);
        };
        img.onerror = tryNextImage;

        img.src = url;
    }
    else {
        // Handle the case where none of the images loaded
    }
}
于 2008-12-15T00:49:53.083 に答える