如何使用 jQuery 非同步載入圖片：逐步指南

使用 jQuery 非同步影像載入

協調網頁上影像的載入和顯示可以顯著影響其效能。非同步載入影像透過授予對影像載入順序和時間的控制來確保對使用者體驗的干擾最小化。 jQuery 是一個多功能的 JavaScript 函式庫，提供了處理非同步任務（包括圖片載入）的便捷方法。

使用 XMLHttpRequest 進行非同步映像載入

非同步載入映像的一種方法是利用 XMLHttpRequest (XHR) 物件。然而，這種方法會帶來挑戰，特別是在遇到錯誤或設定逾時來捕捉 404 回應時。

替代方法：操作圖像元素

更可靠的非同步加載方法圖像涉及創建img 元素，將其來源屬性設定為圖像URL，並觀察其加載事件。這種事件驅動的方法可以更好地控制處理載入錯誤和檢查影像可用性。

var img = $("<img  alt="如何使用 jQuery 非同步載入圖片：逐步指南" >").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);
        }
    });

在此程式碼片段中：

• 建立了一個新的 img 元素，其來源是設定為所需的圖片 URL。
• on('load') 事件偵聽器附加到 img 元素，一旦圖片完全載入就會呼叫該事件偵聽器已載入。
• 在事件偵聽器中，將檢查complete、naturalWidth 和naturalHeight 屬性以驗證圖片是否已成功載入。如果不滿足其中任何一個條件，則會顯示錯誤訊息。
• 如果映像載入成功，則會將其附加到預定的
  中。 ID 為「something」的元素。

以上是如何使用 jQuery 非同步載入圖片：逐步指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！