jQuery callback po załadowaniu wszystkich obrazów w dom?

Question

jQuery callback po załadowaniu wszystkich obrazów w dom?

Jak uruchomić zdarzenie, gdy wszystkie obrazy w DOM są załadowane? Dużo wygooglowałem. Znalazłem to, ale chyba nie działa:

JQuery event for images loaded

46

jquery image load

Author: Community, 2011-02-01

Source

3 answers

Poniżej jest to, co wymyśliłem, używając deferred objects i $.when zamiast używać licznika.

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

Daj mi znać, jeśli są jakieś zastrzeżenia.

6

Author: holmis83,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-06-20 12:21:17

Jeden problem, na który natknąłem się z edytowanym rozwiązaniem user113716 jest to, że uszkodzony obraz powstrzyma licznik przed osiągnięciem 0. To mi to naprawiło.

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

5

Author: jel,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-09-20 20:23:52

score 118 · Accepted Answer

Użyj load()^(docs) metoda przeciw window.

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

Uwaga : w nowszych wersjach jQuery użyj $(window).on('load', function(){ ...});

Lub po prostu zrób to bezpośrednio przez window.onload .

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

Jeśli chcesz wywołać osobne Zdarzenie dla każdego obrazu, umieść .load() na każdym obrazie.

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

Lub jeśli istnieje szansa, że obraz może być buforowany, zrób to:

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

EDIT:

W celu wykonania jakiejś czynności po ostatni załadowany obraz, użyj licznika ustawionego na całkowitą liczbę obrazów i zmniejsz za każdym razem, gdy zostanie wywołana obsługa ładowania.

Kiedy osiągnie 0, Uruchom inny kod.

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