动态加载图像

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中.(我想添加一个加载图像,直到pic完全加载)

Answer 1

你可以使用jQuery lazyload插件.

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