首頁 > web前端 > js教程 > 如何使用 jQuery 設定非同步影像載入逾時?

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

Linda Hamilton
發布: 2024-11-12 07:31:01
原創
380 人瀏覽過

How to Set Timeouts for Asynchronous Image Loading with 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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板