动态加载图片

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，当用户向下滚动相应图像必须出现在该专区。 （我想还添加加载图像，直到PIC负载完全）

Answer 1

您可以使用jQuery lazyload plugin了点。

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