Lazy Load, 延迟加载图片的 jQuery 插件

Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的.

在包含很多大图片长页面中延迟加载图片可以加快页面加载速度. 浏览器将会在加载可见图片之后即进入就绪状态. 在某些情况下还可以帮助降低服务器负担.

怎样使用?

Lazy Load 依赖于  jQuery . 请将下列代码加入页面  head  区域:

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>

</pre><p>你必须修改 HTML 代码. 在 src 属性中设置展位符图片, demo 页面使用 1x1 像素灰色 GIF 图片. 并且需要将真实图片的 URL 设置到 data-original 属性. 这里可以定义特定的 class 以获得需要延迟加载的图片对象. 通过这种方法你可以简单地控制插件绑定.</p><p><span style="font-family: 'Microsoft Yahei', Tahoma, Arial, SimSun, 'Hiragino Sans GB', PMingLiu, Verdana, sans-serif; font-size: 13px; line-height: 21.450000762939453px; background-color: rgb(249, 249, 249);"></span><pre name="code" class="html"><img class="lazy" src="img/grey.gif" data-original="img/example.jpg"  width="640" heigh="480">

处理图片的代码如下.

$("img.lazy").lazyload();

这将使所有  class  为  lazy  的图片将被延迟加载. 可以参考

原文地址  点击