670 Stimmen

Simon_Weaver avatar

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

Gefragt el 13 de Februar, 2009
Wann wurde die Frage gestellt
372703 Ansichten
Anzahl der Besuche der Frage
5 Antworten
Anzahl der Fragenantworten
Gelöst
Aktueller Status der Frage

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.

Gefragt el 13 de Februar, 2009 von Simon_Weaver

Antworten

Zu viele Anzeigen?

1072voto

paxdiablo avatar
paxdiablo Punkte 809679

Mit jQuery verwenden Sie $(document).ready() um etwas auszuführen, wenn die DOM wird geladen und $(window).on("load", handler) um etwas auszuführen, wenn alle anderen Dinge ebenfalls geladen sind, wie z. B. die Bilder.

Der Unterschied ist in der folgenden vollständigen HTML-Datei zu sehen, vorausgesetzt, Sie haben eine Menge von jollyrogerNN JPEG-Dateien (oder andere geeignete Dateien):

<html>
    <head>
        <script src="jquery-1.7.1.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                alert ("done");
            });
        </script>
    </head><body>
        Hello
        <img src="jollyroger00.jpg">
        <img src="jollyroger01.jpg">
        // : 100 copies of this in total
        <img src="jollyroger99.jpg">
    </body>
</html>

Damit wird das Warnfeld angezeigt, bevor die Bilder geladen werden, da das DOM zu diesem Zeitpunkt fertig ist. Wenn Sie dann ändern:

$(document).ready(function() {

in:

$(window).on("load", function() {

dann erscheint das Warnfenster erst, wenn nach die Bilder werden geladen.

Um zu warten, bis die gesamte Seite fertig ist, könnten Sie also etwas wie folgt verwenden:

$(window).on("load", function() {
    // weave your magic here.
});
Beantwortet el 13 de Februar, 2009 von paxdiablo (809679 Punkte )

160voto

alex avatar
alex Punkte 457905

Ich habe ein Plugin geschrieben, das Callbacks auslösen kann, wenn Bilder in Elementen geladen wurden, oder einmal pro geladenem Bild.

Sie ist ähnlich wie $(window).load(function() { .. }) mit dem Unterschied, dass Sie einen beliebigen Selektor für die Prüfung definieren können. Wenn Sie nur wissen wollen, wann alle Bilder in #content (zum Beispiel) geladen haben, ist dies das richtige Plugin für Sie.

Es unterstützt auch das Laden von Bildern, auf die im CSS verwiesen wird, wie z. B. background-image , list-style-image , usw.

waitForImages jQuery-Plugin

Beispiel für die Verwendung

$('selector').waitForImages(function() {
    alert('All images are loaded.');
});

Beispiel auf jsFiddle .

Weitere Dokumentation ist auf der GitHub-Seite verfügbar.

Beantwortet el 2 de Marsch, 2011 von alex (457905 Punkte )

47voto

hyankov avatar
hyankov Punkte 3909

$(window).load() wird nur beim ersten Laden der Seite funktionieren. Wenn Sie dynamische Dinge tun (z. B. auf eine Schaltfläche klicken und warten, bis neue Bilder geladen werden), wird dies nicht funktionieren. Um das zu erreichen, können Sie mein Plugin verwenden:

Demo

Herunterladen

/**
 *  Plugin which is applied on a list of img objects and calls
 *  the specified callback function, only when all of them are loaded (or errored).
 *  @author:  H. Yankov (hristo.yankov at gmail dot com)
 *  @version: 1.0.0 (Feb/22/2010)
 *  http://yankov.us
 */

(function($) {
$.fn.batchImageLoad = function(options) {
    var images = $(this);
    var originalTotalImagesCount = images.size();
    var totalImagesCount = originalTotalImagesCount;
    var elementsLoaded = 0;

    // Init
    $.fn.batchImageLoad.defaults = {
        loadingCompleteCallback: null, 
        imageLoadedCallback: null
    }
    var opts = $.extend({}, $.fn.batchImageLoad.defaults, options);

    // Start
    images.each(function() {
        // The image has already been loaded (cached)
        if ($(this)[0].complete) {
            totalImagesCount--;
            if (opts.imageLoadedCallback) opts.imageLoadedCallback(elementsLoaded, originalTotalImagesCount);
        // The image is loading, so attach the listener
        } else {
            $(this).load(function() {
                elementsLoaded++;

                if (opts.imageLoadedCallback) opts.imageLoadedCallback(elementsLoaded, originalTotalImagesCount);

                // An image has been loaded
                if (elementsLoaded >= totalImagesCount)
                    if (opts.loadingCompleteCallback) opts.loadingCompleteCallback();
            });
            $(this).error(function() {
                elementsLoaded++;

                if (opts.imageLoadedCallback) opts.imageLoadedCallback(elementsLoaded, originalTotalImagesCount);

                // The image has errored
                if (elementsLoaded >= totalImagesCount)
                    if (opts.loadingCompleteCallback) opts.loadingCompleteCallback();
            });
        }
    });

    // There are no unloaded images
    if (totalImagesCount <= 0)
        if (opts.loadingCompleteCallback) opts.loadingCompleteCallback();
};
})(jQuery);
Beantwortet el 22 de Februar, 2010 von hyankov (3909 Punkte )

19voto

Dan Passaro avatar
Dan Passaro Punkte 3881

Für diejenigen, die über den Abschluss des Downloads eines einzelnen Bildes benachrichtigt werden möchten, das nach $(window).load Feuern, können Sie die Bild-Element-Funktion load Veranstaltung.

z.B.:

// create a dialog box with an embedded image
var $dialog = $("<div><img src='" + img_url + "' /></div>");

// get the image element (as a jQuery object)
var $imgElement = $dialog.find("img");

// wait for the image to load 
$imgElement.load(function() {
    alert("The image has loaded; width: " + $imgElement.width() + "px");
});
Beantwortet el 26 de Juli, 2012 von Dan Passaro (3881 Punkte )

15voto

Coz avatar
Coz Punkte 1702

Keine der bisherigen Antworten hat die scheinbar einfachste Lösung gebracht.

$('#image_id').load(
  function () {
    //code here
});
Beantwortet el 23 de Oktober, 2016 von Coz (1702 Punkte )

Verwandte Fragen

Empfohlene Fragen

Top-Tags

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:

Yandex
X