Wie lege ich Zeitüberschreitungen für das asynchrone Laden von Bildern mit jQuery fest?

Asynchrones Laden von Bildern mit jQuery

Es ist wichtig, Bilder asynchron zu laden, um das Rendern der Seite nicht zu blockieren und ein reibungsloses Benutzererlebnis zu gewährleisten. Während $.ajax() ein wertvolles Tool für asynchrone Vorgänge ist, ist es nicht explizit für das Laden von Bildern konzipiert.

Verwendung der .load-Methode von jQuery

jQuery bietet eine praktische . Load()-Methode, die externe Inhalte, einschließlich Bilder, laden kann. Das Festlegen eines Timeouts für das Laden von Bildern ist jedoch mit .load() nicht einfach.

Alternative mit nativem Bildelement

Ein alternativer Ansatz besteht darin, ein neues Bildelement zu erstellen direkt und legen Sie sein Quellattribut fest. Dies ermöglicht mehr Flexibilität beim Laden von Bildern.

Einstellen einer Zeitüberschreitung

Um eine Zeitüberschreitung für das asynchrone Laden von Bildern festzulegen, führen Sie die folgenden Schritte aus:

1. Erstellen Sie das Bild Element:

   var img = $("<img />");

2. Legen Sie das Quellattribut fest:

   img.attr('src', 'http://somedomain.com/image.jpg');

3. Handle das Ladeereignis:

   img.on('load', function() {
       // Checks if the image has loaded successfully
       if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
           // Image failed to load
           alert('broken image!');
       } else {
           // Image loaded successfully
           $("#something").append(img);
       }
   });

Wenn das Wenn das Bild erfolgreich geladen wurde, können Sie es an der gewünschten Stelle in Ihrem HTML anhängen. Wenn das Bild nicht geladen werden kann (z. B. 404), können Sie den Fehler nach Belieben beheben.

Das obige ist der detaillierte Inhalt vonWie lege ich Zeitüberschreitungen für das asynchrone Laden von Bildern mit jQuery fest?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!