Javascript：懶加載圖像水平Div？

Question

我有一個div，有一堆水平顯示的縮略圖（帶水平滾動條）。有沒有辦法延遲加載這些縮略圖，只有當用戶水平滾動到他們的位置時才顯示它們？我見過的所有例子都檢查瀏覽器窗口，而不是div。

這是參賽作品，所以有時會有數百個條目，這會嚴重影響性能。

在此先感謝。

Answer 1

我分岔的lazy load plugin爲jQuery和容器中的DIV增加了延遲加載圖像的支持。 jQuery的lazy load plugin現在直接支持這個。如果你需要刪除對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給了我一個方便的小腳本塊載入圖像：

How to display loading status with preloader and multiple images?