jQuery圖像延遲加載仍然是優化網頁加載速度的解決方案

Question

一段時間以前，我注意到像SmashingMagazine，Noupe和其他一些大設計博客實現他們的圖像延遲加載。我想這有助於優化他們的加載時間並節省服務器資源。

然後我來到這個jQuery lazyload的圖像，但插件壞了，不適用於新的瀏覽器。想知道的是lazyload仍然推薦優化網站嗎？

Answer 1

這取決於您擁有多少圖片以及它們的重要性，有很多解決方案可以提高您的表現（you can find a presentation about the topic here），其中大部分取決於您的網站的組織方式以及我們的需求。所以，如果你的網站有很多小圖標在很多不同的地方被重用（like amazon does），你可以使用CSS sprites，你可以使用直接在HTML上編碼的圖像，就像谷歌一直在做的很多，你可以做懶加載，所以這一切都取決於你的情況。

但回到懶加載插件，尋找JavaScript錯誤或類似的東西，如果它不工作，你甚至可以爲自己建立一個懶惰的加載器，不應該那麼複雜。這裏是能夠工作黑客攻擊（我沒有跑，所以我不能肯定）：

<img lazy_loaded_src="/some_image.jpeg" class="lazy_loaded"/> 

然後在JavaScript：

jQuery("img.lazy_loaded").each(function() { 
    var image = jQuery(this); 
    image.attr("src", image.attr("lazy_loaded_src")); 
}); 

這應該有相同的延遲加載只要您在頁面加載後執行此操作。

Answer 2

奇怪的是它壞了。也許它與你的jQuery版本衝突？

我使用延遲加載的圖像。在某些情況下使用它是一種很好的技術。