关于jQuery图片的延迟加载lazyload

以前用过几次，今天又看到了就整理了下来。

插件在用户滚动页面到图片之后才进行加载，对于有较多的图片的网页，

使用图片延迟加载，能有效的提高页面加载速度。

注意事项：

需要真正实现图片延迟加载，必须将真实图片地址写在 data-original 属性中。若 src 与 data-original 相同，则只是一个特效而已，并不达到延迟加载的功能。

下载jQuery lazyload v1.7.2

官网下载

使用方法：

1.  载入 JavaScript 文件

   

 

2.  修改 HTML 代码中需要延迟加载的 IMG 标签

    <！--将真实图片地址写在 data-original 属性中，      而 src 属性中的图片换成占位符的图片（例如 1x1       像素的灰色图片或者 loading 的 gif 图片）

     添加 class="lazy" 用于区别哪些图片需要延时加          载，当然你也可以换成别的关键词，修改的同时        记得修改调用时的 jQuery 选择器

     添加 width 和 height 属性有助于在图片未加载时        占满所需要的空间-->

   

3.  调用 Lazy Load

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

参数说明：