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?