是否有任何有利於延遲JavaScript的圖像加載？

我在每個頁面上都有一個包含該頁面對象圖像的幻燈片。每個幻燈片通常包含5-6個圖像幻燈片。是否有任何有利於延遲JavaScript的圖像加載？

我在想的是隻在前2張圖片上設置src屬性，其餘的我只設置data-src屬性到圖片文件，然後在整個頁面之後加載其餘的圖片加載了此Javascript的幫助：

function loadImages() { 
    $('#house-carousel .item img').each(function(){ 
     if($(this).attr('data-src')){ 
      $(this).attr('src', $(this).attr('data-src')); 
     } 
    }); 
} 

$(document).ready(loadImages);

的思維過程是，由於圖像不顯示給用戶查看網頁的第一秒，我可以延遲加載他們，讓客戶端下載首先在頁面上的其餘內容。

但是現在我又在想......這真的有幫助嗎？我的意思是，圖像不會渲染阻塞;對？那麼，如果我在加載頁面的時候加載它們，或者在頁面加載後加載它們，它真的很重要嗎？

注意，它不是一個「延遲直到用戶查看圖像」的腳本，它只是延遲它，直到其他資源首先加載。

那麼你怎麼看？這真的有幫助嗎？速度測試如http://tools.pingdom.com不顯示任何區別。

來源

2015-04-28 Marcus Lind

這是一個很好的問題。載入1張圖片「必須」更快，以載入更多圖片。所以一切都取決於你的懶惰加載方法。 – Petroff

是的，但它有助於DOM的其他部分加載更快嗎？因爲這是重點。如果我在彼此之後立即加載5張圖片，或者如果我加載1，則繼續DOM的其餘部分，然後加載其他4張圖片。是否有任何性能增益或Percieved性能增益？ –

它會更快。我不知道多快。但是如果你沒有加載圖像，這可能會打破你的滑塊。記在心上。 – Petroff

這是我的想法。

圖片通常佔網頁上大部分下載的字節數。因此，優化圖像通常會爲您的網站帶來最大的字節節省和性能提升。因此，按需加載圖像是執行圖像輪播/畫廊的最佳方式。

的2個主要原因是：

1）用戶可能甚至不滾動經過圖像和所有這些圖像（除可見光第一圖像）已被加載無故。

2）帶寬消耗 - 考慮移動設備和用戶使用有限的數據計劃。它也影響總頁面加載時間，這意味着頁面加載時間將例如是5秒，而不是4.6秒。這個差別幾乎不明顯，但是，如果有50/100張圖像的話。

3）觸發資源（任何資源，而不僅僅是圖像）在需要時下載，而不是加載全部對慢速連接不利。

我相信還有很多其他的原因，但是，我會讓你弄清楚。

如此偉大的想法，請隨時編輯並添加您的想法。

來源

2015-04-28 11:26:08 lshettyl

但在上面的情況下，圖像不會「按需」加載。當文檔的其餘部分被加載後，它們才被加載。所以它仍然加載所有圖像。所以基本上你說，加載「按需」是好的。但是，在DOM完全加載之後將圖像延遲到了什麼時候？ Benifitial？ –

那麼，如果我加載頁面時加載它們，或者如果我在頁面加載後加載它們，它會真的很重要嗎？

只是要清楚 - 我們是而不是比較延遲加載圖像與加載所有圖像。無論用戶是否查看，所有圖像都將被加載。

如果圖像未預先加載，您的$（窗口）。加載事件理論上火災早期（理論上，因爲 - 看到https://stackoverflow.com/a/545005/360067評論）

但既然你似乎可以用的document.ready（我假設你使用相同的處理程序來啓動你的javascript的其餘部分）這會對你的JavaScript執行沒有任何影響。

現在，圖像佔用帶寬 - 它因瀏覽器而異（請參閱How to make the browser (IE and Chrome) request images before scripts?）。所以你可能（取決於瀏覽器）看到圖像下載阻止後續腳本，從而延緩頁面啓動（注意，對於IE它也取決於你是否使用正常的img標籤vs加載圖像作爲css背景 - css background image最後加載）

接下來，用戶體驗。如果圖像很大（或網絡速度較慢），則延遲加載圖像可能會看到用戶在圖像完全加載之前實際單擊幻燈片。

來源

2015-04-28 12:18:39 potatopeelings

是否有任何有利於延遲JavaScript的圖像加載？

回答

相關問題