web-dev-qa-db-ja.com

DOM内のすべての画像がロードされた後のjqueryコールバック？

DOMのすべての画像が読み込まれたときにイベントを発生させるにはどうすればよいですか？私はたくさんグーグルで検索しました。私はこれを見つけましたが、うまくいかないようです：

読み込まれた画像のjQueryイベント

jqueryimageload
43
Dee

load()を使用します（ドキュメント）windowに対するメソッド。

_$(window).load(function() {
    // this will fire after the entire page is loaded, including images
});
_

または、 _window.onload_ を介して直接実行します。

_window.onload = function() {
    // this will fire after the entire page is loaded, including images
};
_

画像ごとに個別のイベントを発生させたい場合は、各画像に.load()を配置します。

_$(function() {
    $('img').one('load',function() {
        // fire when image loads
    });
});
_

または、画像がキャッシュされる可能性がある場合、これを実行します。

_$(function() {
    function imageLoaded() {
       // function to invoke for loaded image
    }
    $('img').each(function() {
        if( this.complete ) {
            imageLoaded.call( this );
        } else {
            $(this).one('load', imageLoaded);
        }
    });
});
_

編集：

最後の画像が読み込まれた後に何らかのアクションを実行するには、画像の総数に設定されたカウンターを使用し、読み込みハンドラーが呼び出されるたびにデクリメントします。

_0_に達したら、他のコードを実行します。

_$(function() {
    function imageLoaded() {
       // function to invoke for loaded image
       // decrement the counter
       counter--; 
       if( counter === 0 ) {
           // counter is 0 which means the last
           //    one loaded, so do something else
       }
    }
    var images = $('img');
    var counter = images.length;  // initialize the counter

    images.each(function() {
        if( this.complete ) {
            imageLoaded.call( this );
        } else {
            $(this).one('load', imageLoaded);
        }
    });
});
_
113
user113716

以下は、deferredオブジェクトと$.whenカウンタを使用する代わりに。

var deferreds = [];
$('img').each(function() {
    if (!this.complete) {
        var deferred = $.Deferred();
        $(this).one('load', deferred.resolve);
        deferreds.Push(deferred);
    }
});
$.when.apply($, deferreds).done(function() {
    /* things to do when all images loaded */
});

警告があれば教えてください。

6
holmis83

User113716の編集されたソリューションで遭遇した問題の1つは、壊れた画像によってカウンターが0にならないようにすることです。これにより修正されました。

.error(function(){
  imageLoaded();
  $(this).hide();
});
5
jel