我有一个 div,其中有一堆水平显示的缩略图(带有水平滚动条)。有没有办法延迟加载这些缩略图,并且仅在用户水平滚动到其位置时才显示它们?我见过的所有示例都检查浏览器窗口,而不是 div。
这是针对竞赛参赛作品的,因此有时会有数百个参赛作品,这会极大地影响性能。
提前致谢。
最佳答案
我 fork 了 lazy load plugin jQuery 并添加了对容器 div 中延迟加载图像的支持。 lazy load plugin jQuery 现在直接支持这一点。如果需要的话,删除对 jQuery 的依赖或将其适应另一个库应该不会太难。
您可以从 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") });
关于asp.net - Javascript:在水平 Div 中延迟加载图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/444730/