Javascript：在水平Div中延遲加載圖像？

Question

我有一個div，其中有一堆水平顯示的縮略圖（帶有水平滾動條）。 有沒有一種方法可以延遲加載這些縮略圖並僅在用戶水平滾動到其位置時才顯示它們？ 我看過的所有示例都檢查瀏覽器窗口，而不是div。

這是用於比賽的參賽作品，因此有時會有數百個作品，這會嚴重影響性能。

提前致謝。

Answer 1

我分叉了jQuery的延遲加載插件 ，並添加了對容器div中的延遲加載圖像的支持。 jQuery的惰性加載插件現在直接支持此功能。 如果需要的話，刪除對jQuery的依賴關系或將其適應於另一個庫並不難。

您可以從github獲取我的分叉項目： http : //github.com/silentmatt/jquery_lazyload/tree/master 。

要使用它，請像在原始圖像上一樣在圖像上調用lazyload，不同之處在於您需要在滾動div元素中添加“容器”選項。 因此，如果您的HTML看起來像這樣：

<div id="container" style="width: 765px; overflow: scroll;">
    <img src="image1.jpg" width="765" height="574">
    <img src="image2.jpg" width="765" height="574">
    <img src="image3.jpg" width="765" height="574">
    ...
</div>

您可以這樣調用lazyload：

$("#container img").lazyload({ container: $("#container") });

Answer 2

在遇到類似問題的地方查看我的問題。 傑森·邦廷 （ Jason Bunting）給了我一個方便的小腳本，用於按塊加載圖像。

如何顯示預加載器和多個圖像的加載狀態？