670 Stimmen

Offizieller Weg, jQuery zu bitten, auf das Laden aller Bilder zu warten, bevor etwas ausgeführt wird

In jQuery, wenn Sie dies tun:

$(function() {
   alert("DOM is loaded, but images not necessarily all loaded");
});

Er wartet darauf, dass das DOM geladen wird, und führt Ihren Code aus. Wenn nicht alle Bilder geladen sind, wird der Code trotzdem ausgeführt. Das ist natürlich das, was wir wollen, wenn wir DOM-Sachen wie das Ein- oder Ausblenden von Elementen oder das Anhängen von Ereignissen initialisieren.

Nehmen wir aber an, ich möchte eine Animation, die erst dann läuft, wenn alle Bilder geladen sind. Gibt es eine offizielle Möglichkeit in jQuery, dies zu tun?

Der beste Weg, den ich kenne, ist die Verwendung von <body onload="finished()"> aber ich möchte das eigentlich nicht tun, es sei denn, ich muss es tun.

Anmerkung: Es gibt eine Fehler in jQuery 1.3.1 im Internet Explorer, der tatsächlich wartet, bis alle Bilder geladen sind, bevor er den Code ausführt $function() { } . Wenn Sie also diese Plattform verwenden, erhalten Sie das von mir gewünschte Verhalten anstelle des oben beschriebenen korrekten Verhaltens.

6voto

Adrien Be Punkte 18445

Ich würde die Verwendung von imagesLoaded.js Javascript-Bibliothek.

Warum nicht die jQuery $(window).load() ?

Wie am https://stackoverflow.com/questions/26927575/why-use-imagesloaded-javascript-library-versus-jquerys-window-load/26929951

Das ist eine Frage des Geltungsbereichs. imagesLoaded ermöglicht es, eine Reihe von Bildern anzuvisieren, während $(window).load() zielt auf alle Vermögenswerte - einschließlich aller Bilder, Objekte, .js und .css Dateien und sogar iframes. Höchstwahrscheinlich wird imagesLoaded früher ausgelöst als $(window).load() weil sie auf eine kleinere Gruppe von Vermögenswerten abzielt.

Weitere gute Gründe für die Verwendung von imagesloaded

  • offiziell von IE8+ unterstützt
  • Lizenz: MIT-Lizenz
  • Abhängigkeiten: keine
  • Gewicht (minified & gzipped) : 7kb minified (leicht!)
  • Download-Builder (hilft, Gewicht zu sparen): nicht nötig, bereits winzig
  • auf Github: YES
  • Gemeinschaft und Mitwirkende: ziemlich groß, über 4000 Mitglieder, allerdings nur 13 Mitwirkende
  • Geschichte & Beiträge : stabil, da relativ alt (seit 2010), aber immer noch aktives Projekt

Ressourcen

4voto

molokoloco Punkte 4266

Mit jQuery komme ich mit dieser...

$(function() {
    var $img = $('img'),
        totalImg = $img.length;

    var waitImgDone = function() {
        totalImg--;
        if (!totalImg) alert("Images loaded!");
    };

    $('img').each(function() {
        $(this)
            .load(waitImgDone)
            .error(waitImgDone);
    });
});

Demo : http://jsfiddle.net/molokoloco/NWjDb/

2voto

Mario Medrano Punkte 31

Auf diese Weise können Sie eine Aktion ausführen, wenn alle Bilder im Body oder einem anderen Container (der von Ihrer Auswahl abhängt) geladen sind. PURE JQUERY, keine Pluggins erforderlich.

var counter = 0;
var size = $('img').length;

$("img").load(function() { // many or just one image(w) inside body or any other container
    counter += 1;
    counter === size && $('body').css('background-color', '#fffaaa'); // any action
}).each(function() {
  this.complete && $(this).load();        
});

1voto

Yevgeniy Afanasyev Punkte 32229

Verwenden Sie imagesLoaded PACKAGED v3.1.8 (6,8 Kb, wenn minimiert). Es ist relativ alt (seit 2010), aber immer noch aktives Projekt.

Sie können es auf github finden: https://github.com/desandro/imagesloaded

Ihre offizielle Website: http://imagesloaded.desandro.com/

Warum es besser ist als die Verwendung:

$(window).load() 

Denn Sie möchten vielleicht Bilder dynamisch laden, etwa so: jsfiddle

$('#button').click(function(){
    $('#image').attr('src', '...');
});

1voto

Mariusz Charczuk Punkte 419

Meine Lösung ist ähnlich wie molokoloco . Geschrieben als jQuery-Funktion:

$.fn.waitForImages = function (callback) {
    var $img = $('img', this),
        totalImg = $img.length;

    var waitImgLoad = function () {
        totalImg--;
        if (!totalImg) {
            callback();
        }
    };

    $img.each(function () {
        if (this.complete) { 
            waitImgLoad();
        }
    })

    $img.load(waitImgLoad)
        .error(waitImgLoad);
};

Beispiel:

<div>
    <img src="img1.png"/>
    <img src="img2.png"/>
</div>
<script>
    $('div').waitForImages(function () {
        console.log('img loaded');
    });
</script>

CodeJaeger.com

CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.

Powered by:

X