Question

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

这适用于参赛作品，因此有时会有数百个参赛作品，这会严重影响参赛作品。

提前致谢。

Answer 1

~~我为jQuery分配lazy load plugin并在容器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?

Javascript：在水平Div中延迟加载图像？

2 个答案: