javascript – 动态加载图片

我必须在一个页面中显示大量不同大小的图像.

<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>

如果我使用这样的代码,我的页面将花费很多时间来完全加载,所以我希望所有图像不应该一次加载只有视口内的图像(网页的可见部分)应该首先加载,当用户滚动到它们时应该加载休息.

注意
我不希望它用于文本(我在代码中使用的图像信息),文本应该立即出现.

在facebook中,当用户向下滚动时,它会加载新内容,但在这里我只想要图像,我使用的是装饰的div,当用户向下滚动时,相应的图像必须出现在该div中. (我想添加一个加载图像,直到pic完全加载)

解决方法:

您可以使用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.