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

【问题标题】：Javascript: Lazy Load Images In Horizontal Div?Javascript：在水平 Div 中延迟加载图像？
【发布时间】：2009-01-14 21:18:26
【问题描述】：

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

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

提前致谢。

【问题讨论】：

标签： asp.net javascript html lazy-loading

【解决方案1】：

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

~~你可以从 github 获取我的 fork 项目：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") });

【讨论】：

非常感谢！我已经为此拉头发很长时间了！
快速提问：它似乎在 IE 中不起作用，这是一个已知问题吗？
我认为问题是当图像加载过快时加载事件没有触发。我对其进行了更改，因此它在绑定到加载事件后设置了 src 属性，所以它现在应该可以工作了。

【解决方案2】：

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

How to display loading status with preloader and multiple images?

【讨论】：