使用Javascript：懒加载图像在水平事业部？

Question

我有一个具有水平地示出（用水平滚动条）一堆缩略图的一个div。有没有一种方法来延迟加载这些缩略图，只告诉他们，一旦用户水平滚动到自己的位置？所有的例子我见过检查浏览器窗口，而不是一个div。

这是对参赛所以有时也有数百个条目，这极大地影响性能的。

预先感谢。

Answer 1

<德尔>我分叉的延迟加载插件获得jQuery和增加了对lazy-支持加载图像在容器中的div。借助延迟加载jQuery插件现在支持该直。它不应该是太难以去除的依赖jQuery的，或者适应其他图书馆，如果你需要。

你可以从GitHub我的分叉的项目： http://github.com / silentmatt / jquery_lazyload /树/主。

要使用它，调用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

请参阅我的问题在那里我遇到了类似的问题。 贾森·邦廷给了我一个方便的小脚本块装入图像：

如何显示与预加载器和多个负载状态图象？