javascript - jQuery、画像をプリロードし、画像がロードされたときに通知を受ける方法は?

Question

私はまだJavascriptのすべてに慣れていないので、質問に関してまだ何も実験していないことを正直に言う必要があります。

複数の画像をプリロードし、画像がロードされたときに関数を呼び出す方法またはjQueryを使用したプラグインがあるかどうかを知りたいですか?

Answer 1

画像にイベントを使用できますがload、クロス ブラウザーの問題がいくつかあります (ターゲットにしているプラ​​ットフォームによって異なります)。

var allImgs = $("#container img").filter(function() { return ! this.complete; });
var allImgsLength = allImgs.length;

allImgs.on("load", function() {
    if (--allImgsLength) {
        // Images have loaded.
    }
});

プラグインを含めても構わない場合は、これを比較的うまく処理するwaitForImages (免責事項: 私が書いたもの) があります。:)

あなたはそれを次のように使用します...

$("#container").waitForImages(function() {
    // Images have loaded.
});

jQuery をまったく使用したくない場合は、最初の例を変更できます。最新のブラウザのみをターゲットにしている場合...

var allImgs = [].filter.call(document.querySelectorAll("#container img"), 
                             function(img) {
                                return ! img.complete;
                             });
var allImgsLength = allImgs.length;

[].forEach.call(allImgs, function(img) {
    img.addEventListener(function() {
        if (--allImgsLength) {
            // Images have loaded.
        }
    });
});

古いブラウザをサポートする必要がある場合...

var allImgs = document.getElementById("container").getElementsByTagName("img");
var allImgsLength = allImgs.length;
var i;
var eventCallback = function() {
                        if (--allImgsLength) {
                             // Images have loaded.
                        }
                    };

for (i = 0; i < allImgsLength; i++) {
    if (allImgs[i].complete) {
        allImgsLength--;
    }

    if (allImgs[i].addEventListener) {
        allImgs[i].addEventListener("load", eventCallback);
    } elseif (allImgs[i].attachEvent) {
        allImgs[i].attachEvent("onload", eventCallback);
    } else {
        allImgs[i].onload = eventCallback;
    }
}