0

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

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

提前致谢。

4

2 回答 2

4

我为 jQuery 分叉了延迟加载插件，并在容器 div 中添加了对延迟加载图像的支持。jQuery的延迟加载插件现在直接支持这一点。如果需要，删除对 j​​Query 的依赖或将其调整到另一个库应该不会太难。

您可以从 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") });
于 2009-01-15T00:14:21.007 回答
1

请参阅我遇到类似问题的问题。Jason Bunting给了我一个方便的小脚本来分块加载图像：

如何使用预加载器和多个图像显示加载状态？

于 2009-01-14T21:24:00.087 回答