动态加载图像

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

  

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