如何使用 jQuery 設定非同步影像載入逾時？

使用 jQuery 非同步載入圖片

非同步載入圖片對於避免阻塞頁面渲染並確保流暢的使用者體驗至關重要。雖然 $.ajax() 是異步操作的一個有價值的工具，但它並沒有明確設計用於圖像加載。

使用 jQuery 的 .load 方法

jQuery 提供了方便的 .ajax() 方法。 load() 方法可以載入外部內容，包括圖片。然而，使用 .load() 設定圖片載入逾時並不簡單。

使用原生影像元素的替代方法

另一種方法是建立一個新的影像元素直接並設定其來源屬性。這樣可以更靈活地處理影像載入。

設定超時

要設定非同步影像載入的超時，請依照下列步驟操作：

1. 創建圖像元素：

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

   登入後複製

2. 設置源屬性：

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

   登入後複製

3. 處理載入事件：

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

   登入後複製

圖片載入成功後，可以將其追蹤到所需位置你的 HTML。如果圖片載入失敗（例如404），您可以按照您認為合適的方式處理錯誤。

以上是如何使用 jQuery 設定非同步影像載入逾時？的詳細內容。更多資訊請關注PHP中文網其他相關文章！