Jquery callback после загрузки всех изображений в dom?

Ответ 1

Используйте load() ^(docs) метод 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);
        }
    });
});

EDIT:

Чтобы выполнить какое-либо действие после загрузки последнего изображения, используйте счетчик, установленный на общем количестве изображений, и уменьшайте каждый раз, когда вызывается обработчик нагрузки.

Когда он достигнет 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);
        }
    });
});

Ответ 2

Одна проблема, с которой я столкнулся с измененным решением user113716, заключается в том, что сломанное изображение будет поддерживать счетчик до достижения 0. Это исправило это для меня.

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

Ответ 3

Ниже приводится то, что я придумал, используя отложенные объекты и $.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 */
});

Сообщите мне, есть ли какие-либо оговорки.