JQuery Callback после того, как все изображения в DOM загружены?

Question

Как я могу запустить событие, когда все изображения в DOM загружены? Я много гуглил. Я нашел это, но это не похоже на работу:

Событие jQuery для загруженных изображений

Answer 1

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

---

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);
        }
    });
});

Answer 2

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

Дайте мне знать, если есть какие-либо предостережения.

Answer 3

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

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