asp.net - Javascript:在水平 Div 中延迟加载图像？

Question

我有一个 div，其中有一堆水平显示的缩略图(带有水平滚动条)。有没有办法延迟加载这些缩略图，并且仅在用户水平滚动到其位置时才显示它们？我见过的所有示例都检查浏览器窗口，而不是 div。

这是针对竞赛参赛作品的，因此有时会有数百个参赛作品，这会极大地影响性能。

提前致谢。

Answer 1

我 fork 了 lazy load plugin jQuery 并添加了对容器 div 中延迟加载图像的支持。 lazy load plugin jQuery 现在直接支持这一点。如果需要的话，删除对 j​​Query 的依赖或将其适应另一个库应该不会太难。

您可以从 github 获取我的 fork 项目:http://github.com/silentmatt/jquery_lazyload/tree/master .

要使用它，请像在原始中一样在图像上调用延迟加载，只不过您需要使用滚动 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") });