So laden Sie Bilder asynchron mit jQuery: Eine Schritt-für-Schritt-Anleitung

Asynchrones Laden von Bildern mit jQuery

Das Koordinieren des Ladens und Anzeigens von Bildern auf Ihrer Webseite kann sich erheblich auf deren Leistung auswirken. Durch das asynchrone Laden von Bildern wird eine minimale Beeinträchtigung des Benutzererlebnisses gewährleistet, da die Kontrolle über die Reihenfolge und den Zeitpunkt des Ladens der Bilder gewährleistet wird. jQuery, eine vielseitige JavaScript-Bibliothek, bietet praktische Methoden für die Handhabung asynchroner Aufgaben, einschließlich des Ladens von Bildern.

Asynchrones Laden von Bildern mit XMLHttpRequest

Ein Ansatz zum asynchronen Laden von Bildern ist Verwendung des XMLHttpRequest (XHR)-Objekts. Diese Methode birgt jedoch Herausforderungen, insbesondere wenn Fehler auftreten oder Zeitüberschreitungen zum Abfangen von 404-Antworten festgelegt werden.

Alternative Methode: Bearbeiten von Bildelementen

Eine zuverlässigere Methode zum asynchronen Laden Bei Bildern wird ein img-Element erstellt, sein Quellattribut auf die Bild-URL gesetzt und sein Ladeereignis beobachtet. Dieser ereignisgesteuerte Ansatz bietet eine bessere Kontrolle über die Behandlung von Ladefehlern und die Überprüfung der Bildverfügbarkeit.

var img = $("<img />").attr('src', 'http://somedomain.com/image.jpg')
    .on('load', function() {
        if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
            alert('Broken image!');
        } else {
            $("#something").append(img);
        }
    });

In diesem Codeausschnitt:

• Ein neues img-Element wird erstellt und seine Quelle ist auf die gewünschte Bild-URL einstellen.
• Der on('load')-Ereignis-Listener ist an das img-Element angehängt, das aufgerufen wird, sobald das Bild vollständig geladen ist.
• Im Ereignis-Listener , werden die Eigenschaften „complete“, „naturalWidth“ und „naturalHeight“ überprüft, um zu überprüfen, ob das Bild erfolgreich geladen wurde. Wenn eine dieser Bedingungen nicht erfüllt ist, wird eine Fehlermeldung angezeigt.
• Wenn das Bild erfolgreich geladen wird, wird es an ein vorgegebenes
  angehängt. Element mit der ID „etwas“.

Das obige ist der detaillierte Inhalt vonSo laden Sie Bilder asynchron mit jQuery: Eine Schritt-für-Schritt-Anleitung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!