jquery - 画像のセットがjQueryでロードを終了したときを判断しますか？

Question

それで、画像がjQueryでいつロードを終了したかを判断できる場合、それは複数の画像でまったく同じですか？

Answer 1

Deferred読み込まれている各画像のオブジェクトを作成し、それらを配列に格納します。

各画像の.load()コールバックが呼び出されるとresolve、関連する遅延オブジェクトが呼び出され、すべての promise が解決された$.when()場合にのみ、最終的なコールバックを呼び出すために使用されます。

function onAllLoaded(imgs, callback) {
    var i, n, a = [];
    for (i = 0, n = imgs.length; i < n; ++i) {
        a[i] = $.Deferred();
        $(imgs[i]).on('load', a[i].resolve); // not using .onload to avoid clashes
    }
    $.when($, a).done(callback);
}

.load一部のブラウザー (初期の IE?) では、コールバックが実際に発生するように特別な措置を講じる必要があることに注意してください。それはこの回答の範囲外です。

Answer 2

簡単にできます：

function onloadall(images, callback) {
    var n = 0;
    for (var i=0; i<images.length; i++) {
        if (!images[i].width) {
            n++;
            images[i].onload = function(){
               if (--n==0) callback();
            }
        }
    }
    if (n==0) callback();
}

デモ