javascript - 动态加载图像

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>

如果我使用这样的代码，我的页面将需要很长时间才能完全加载，所以我希望所有图像不应该一次加载只有视口(viewport)内的图像(网页的可见部分)应该被加载first 和 rest 应该在用户滚动到它们时加载。

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

Answer 1

您可以使用 jQuery lazyload plugin为此。

Lazy Load is a jQuery plugin written in JavaScript. It delays loading of images in long web pages. Images outside of viewport (visible part of web page) wont be loaded before user scrolls to them.