jquery插件 —— Lazy Load 延迟加载图片

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

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

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

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

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

2、你必须修改 HTML 代码. 在 src 属性中设置展位符图片, demo 页面使用 1x1 像素灰色 GIF 图片. 并且需要将真实图片的 URL 设置到 data-original 属性. 这里可以定义特定的 class 以获得需要延迟加载的图片对象. 通过这种方法你可以简单地控制插件绑定.

<img class="lazy"src="img/grey.gif"data-original="img/example.jpg" width="640" heigh="480">

处理图片的代码如下：

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

这将使所有 class 为 lazy 的图片将被延迟加载

插件下载网站：http://plugins.jquery.com/lazyload/