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

2015-02-28 来源:未知作者:admin

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

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

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

Lazy Load 灵感来自 Matt Mlinac 制作的 YUI ImageLoader 工具箱. 这是演示页面.

这里有几个可用的 demo 页面提供给那些匆忙的人参考: 基本选项, 淡入展示效果, script 脚本缺失的降级处理, 水平滚动, 容器内水平滚动, 容器内垂直滚动, 页面内存在超多图片, 延时加载图片

查看 demo 中每个请求间浏览器缓存的内容. 你可以通过开发者控制台 (Chrome 和 Safari), Firebug (Firefox) 或者 HTTPHeaders (IE) 检测到实际加载的内容.

怎样使用?

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

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

你必须修改 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();

这将使所有 classlazy 的图片将被延迟加载. 可以参考基本选项 demo