动态加载图像

Loading Image Dynamically

本文关键字：图像 加载 动态      更新时间：2023-09-26

我必须在一个页面中显示许多不同大小的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完全加载)

你可以使用jQuery的lazyload插件。

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

相关文章：