动态加载图像

Question

我必须在一个页面中显示大量不同大小的Image。

<div id="box1">
 <span>Something About Image Goes Here</span>
 <img src="img1.jpg" id="img1" />
</div>
<div id="box2">
 <span>Something About Image Goes Here</span>
 <img src="img2.jpg" id="img2" />
</div>
---
---
<div id="box30">
 <span>Something About Image Goes Here</span>
 <img src="img30.jpg" id="img30" />
</div>

如果我使用这样的代码，我的页面将需要很长时间才能完全加载，所以我希望所有图像不应该一次加载，只有Images within viewport（网页的可见部分）应该首先加载，其余的应该在用户加载时加载滚动到它们。

注意
我不希望它用于text（我在代码中使用的图像信息），文本应该立即正常显示。
就像在 facebook 中一样，当用户向下滚动时它会加载新内容，但在这里我只想要图像，我使用的是装饰的 div，并且当用户向下滚动时，相应的图像必须出现在该 div 中。 （我还想添加加载图像，直到图片完全加载）

Answer 1

您可以为此使用jQuery lazyload plugin。

Lazy Load 是一个用 JavaScript 编写的 jQuery 插件。它延迟加载 长网页中的图像。视口外的图像（可见部分 网页）不会在用户滚动到它们之前加载。