Können Bilder mit jQuery asynchron geladen werden?

Asynchrones Laden von Bildern mit jQuery

Frage:

Versuch, ein externes Bild asynchron zu laden Die Verwendung von jQuery mit dem folgenden Code:

$.ajax({ 
   url: "http://somedomain.com/image.jpg", 
   timeout:5000,
   success: function() {

   },
   error: function(r,x) {

   }
});

führt zu einem Fehlerreaktion. Ist das asynchrone Laden von Bildern mit jQuery möglich? Wenn nicht, wie können Bilder asynchron geladen werden?

Lösung:

Asynchrones Laden von Bildern ist mit jQuery tatsächlich möglich. Allerdings ist die Methode $.ajax() für diese Aufgabe nicht geeignet. Stattdessen besteht der bevorzugte Ansatz darin, dynamisch ein neues Bildelement zu erstellen und Ereignishandler daran anzuhängen:

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

Diese Methode verwendet den nativen HTML5-Bildlademechanismus, der das Ladeereignis auslöst, wenn das Bild vollständig ist geladen. Durch Überprüfen der Eigenschaften „complete“, „naturalWidth“ und „naturalHeight“ können Sie feststellen, ob das Bild erfolgreich geladen wurde, und Warnungen zu fehlerhaften Bildern verhindern.

Das obige ist der detaillierte Inhalt vonKönnen Bilder mit jQuery asynchron geladen werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!