javascript - lazyload教學 - 後加載:檢查圖像是否在瀏覽器緩存中




lazy loading demo (4)

2017年,Resource Timing API可以幫助您使用PerformanceResourceTiming.transferSize屬性進行檢查。 從服務器(未緩存)下載時,此屬性應返回非零傳輸大小,如果從本地緩存中獲取,則返回零。

參考: https://developer.mozilla.org/en-US/docs/Web/API/PerformanceResourceTiming/transferSizehttps://developer.mozilla.org/en-US/docs/Web/API/PerformanceResourceTiming/transferSize

簡短版本問題:是否有navigator.mozIsLocallyAvailable等效函數適用於所有瀏覽器,或替代?

長版:)

嗨,這是我的情況:我想為asp.net MVC實現一個HtmlHelper擴展,可以輕鬆處理圖像後加載(使用jQuery)。

因此,我使用“alt”屬性中指定的源渲染具有空圖像源的頁面。 我在“window.onload”事件之後插入圖像源,效果很好。

我做了這樣的事情:

$(window).bind('load', function() {
    var plImages = $(".postLoad");
    plImages.each(function() {
        $(this).attr("src", $(this).attr("alt"));
    });
});

問題是:第一次加載後,緩存後加載的圖像。 但是如果頁面加載需要10秒鐘,則在此10秒後將顯示緩存的後載圖像。

所以我想在“document.ready”事件中指定圖像源,如果圖像被緩存以立即顯示它們。

我找到了這個函數:navigator.mozIsLocallyAvailable可以檢查圖像是否在緩存中。 這是我用jquery做的:

//specify cached image sources on dom ready
$(document).ready(function() {
    var plImages = $(".postLoad");
    plImages.each(function() {
        var source = $(this).attr("alt")
        var disponible = navigator.mozIsLocallyAvailable(source, true);
        if (disponible)
            $(this).attr("src", source);
    });
});

//specify uncached image sources after page loading
$(window).bind('load', function() {
        var plImages = $(".postLoad");
        plImages.each(function() {
        if ($(this).attr("src") == "")
            $(this).attr("src", $(this).attr("alt"));
    });
});

它適用於Mozilla的DOM,但它不適用於任何其他DOM。 我試過navigator.isLocallyAvailable:相同的結果。

還有其他選擇嗎?


以防萬一其他人可能遇到同樣的問題。 這裡提供的一些解決方案(即將緩存信息存儲在本地瀏覽器數據存儲中)可能會因為兩個原因而中斷。 首先,如果圖像的高速緩存到期,則第二,如果用戶清除了高速緩存。 另一種方法是將圖像源設置為佔位符。 然後將源更改為圖像路徑/名稱。 這樣,瀏覽器就有責任檢查自己的緩存。 適用於大多數瀏覽器,無論其API如何。


我對你的空圖像來源有一個評論。 你寫了:

因此,我使用“alt”屬性中指定的源渲染具有空圖像源的頁面。 我在“window.onload”事件之後插入圖像源,效果很好。

我在過去遇到過這個問題,因為在某些瀏覽器中,空src屬性會導致額外的請求。 這是他們的行為(從Yahoo!性能規則中復制,還有關於該問題的博客文章 ,更詳細):

  • Internet Explorer向頁面所在的目錄發出請求。
  • Safari和Chrome會向實際頁面提出請求。
  • Firefox 3及更早版本的行為與Safari和Chrome相同,但3.5版解決了此問題[錯誤444931],不再發送請求。
  • 遇到空圖像時,Opera不執行任何操作。

我們在網站上也使用了很多jQuery,並不總是可以避免空圖像標記。 我選擇使用像這樣的1x1 px透明gif: src="t.gif"用於我僅在src="t.gif"之後插入的圖像。 它非常小,可以通過瀏覽器進行緩存。 這對我們來說非常有效。

乾杯,奧利弗


檢查圖像是否已被緩存的最有效,最簡單且廣泛支持的方法是執行以下操作...

  1. 創建一個圖像對象
  2. 將src屬性設置為所需的URL
  3. 立即檢查已完成的屬性以查看圖像是否已緩存
  4. 將src屬性設置回“”或空白,以便不會不必要地加載圖像

像這樣......

function is_cached(src) {
    var img = new Image();
    img.src = src;
    var complete = img.complete;
    img.src = "";
    return complete;
}




lazy-loading