圖片延遲加載響應式佈局？

Question

我看到庫如

• http://www.appelsiini.net/projects/lazyload
• http://luis-almeida.github.io/unveil/

要求您指定圖像的寬度和高度，但由於我們的網站正在使用響應式佈局，即設置圖像寬度爲100％通過CSS，它仍然可以執行延遲加載？ （我已經嘗試了上述兩個庫，但它們不起作用）

那麼，爲響應式佈局執行惰性圖像加載的推薦方法是什麼？

Answer 1

您可以嘗試justlazy庫。在加載圖像之前，您不必提供img標籤。只需在加載圖像之前確定你所選擇的佔位符，例如：

<span data-src="default/image" data-alt="some alt text" 
 
     data-srcset="small/image 600w, big/image 1000w" 
 
     class="justlazy-placeholder"> 
 
</span>

正如你所看到的，也是「有求必應」 srcset屬性支持（見示範項目頁）。然後註冊加載事件。如果您想通過滾動如果您需要更多的靈活性來加載，例如：

Justlazy.registerLazyLoadByClass("justlazy-placeholder");

，也有手動啓動延遲加載的功能。