什麼是延遲加載的最佳方法？

Question

我需要消除圖像渲染阻擋我用這個小腳本這個

<img data-src> 

$('img').each(function() { 
    $(this).attr('src', $(this).data('src')); 
}); 

它是適合所有的瀏覽器，或者是更好地使用這個插件https://plugins.jquery.com/lazyload/？

Answer 1

可以添加這些CSS規則，以避免斷開的圖像圖標顯示出來：

img[src=''], 
img:not([src]) { 
    opacity: 0; 
} 

這樣，沒有SRC的圖像將不會顯示。

Answer 2

你的代碼應該可以在所有瀏覽器中運行，但是你可能想使用一些Lazy Load Plugin功能。例如，它可以在真正需要的時候加載圖像（即，懶惰），而不是在用戶可見區域外。即使沒有人需要，您的代碼也會嘗試同時下載所有圖像。

考慮將啓用沒有JavaScript的機器人或用戶的支持：

<noscript> 
    <img alt="…" src="…"/> 
</noscript> 

<img alt="…" data-src="…"/> 

Answer 3

實際上，在默認情況下加載圖片的瀏覽器有點懶洋洋。網頁頂部的圖像不會中止渲染剩餘部分。由於從服務器瀏覽器獲取圖像數據，並行繪製圖像的預留空間以渲染其他元素。

您的代碼會生成圖像並加載它，而不會將其附加到DOM。它不是延遲加載，它可能是在某種情況下預加載的。

延遲加載是：未開始從服務器下載圖像，直到它們的保留空間在瀏覽器視圖端口上可見。它用於像頁面比查看端口更長的情況，並且有位置停留在頁面較低部分的圖像。在滾動到該位置之前，您不會加載圖像。

所以，如果你想使用延遲加載的好處，你應該選擇插件選項。