WordPress 插件：LazyLoad 按需/延迟加载网页图片

当网页内容里嵌入的图片比较多的时候，如果在打开网页的时候一次性加载所有图片，会使得页面的加载时间显得比较长，也给服务器造成了较大的突发压力。而且可能有些访问者并不会往下滚动页面浏览完全文，此时加载页面靠下位置的图片就浪费了服务器资源。所以很多人会考虑使用 LazyLoad 方法来按需或延迟加载网页图片。

什么是 Lazy Load？

Lazy Load 是一个基于 JavaScript 编写的 jQuery 插件，调用 jQuery 方法来处理按需或延迟加载图片。一般用法是，让图片在快要出现在浏览器显示区域的时候（比如距离浏览器下边缘还有 200px 的时候）才从服务器下载并显示，可以改进页面的加载时间、节省服务器带宽（某些情况下）。

这种工具很早就出现了。不过最新版本的 Lazy Load 不再简单地使用替换的方式来处理网页中的图片。因为即使我们使用 JavaScript 将网页图片的 src 属性（定义了图片的链接地址）移除，新式浏览器仍然会加载该图片。为了缩短用户等待网页加载的时间，新式浏览器，比如 Chrome，甚至可能会根据用户浏览行为预加载网页内容。现在我们只能使用一个较小的图片的链接地址来替换真实的图片地址（将此链接地址放到图片 img 标签的 src 属性中），然后使用 data-original 属性来存储真实图片地址。如下所示。

<img data-original="img/real_image.jpg" src="img/placeholder.gif">

这样做也带来了一些好处，比如我们现在可以将所有的 JavaScript （包括 jQuery）放到页面的最后了。如果想要同时支持那些不支持 JavaScript 的浏览器的话，还需要额外增加一个 <noscript> 标签，将原图片代码放到这个标签里。上面的示例代码变为：

<img data-original="img/real_image.jpg" src="img/placeholder.gif" width="640" heigh="480">
<noscript><img src="img/real_image.jpg" width="640" heigh="480"></noscript>

更多信息请参考上面给出的 Lazy Load 主页。

WordPress 上的 Lazy Load 插件

如果在编辑文章的时候直接修改插入图片的 HTML 代码为前述格式，显然是件非常麻烦的事情。幸好对于类似 WordPress 这样的动态网页来说，可以在生成 HTML 页面的时候对代码进行自动化处理，使用 pre_replace 之类的函数来检查和替换相应的代码段。在 WordPress 上使用相应的插件来完成这一任务是最合适不过了。如果不想 Lazy Load 图片，直接禁用该插件即可，无需更多操作。方便、快捷、简洁、绿色，这是我对 WordPress 插件好坏进行评判的最起码标准。

在 WordPress 插件库中有好几款 Lazy Load 插件，如 Lazy Load、simple-lazyload、BJ Lazy Load、Ai Loader (jQuery Lazy Load)、jQuery Image Lazy Load WP 和 MooTools Image Lazy Load WP。

LAZY LOAD

Lazy Load 是我目前正在使用的。

该插件是从 WordPress.com VIP 团队、TechCrunch 2011 Redesign 团队以及 Jake Goldman (10up LLC) 所写的代码合并而来。使用由 Dave Artz (AOL) 开发的 jQuery.sonar 插件实现上述功能。仅对 post 或者 page 的正文中的图片有效果。(update 2012.09.04) 该插件今日升级到 0.5 版，扩展了功能，开始支持对评论作者头像（Avatar）进行 Lazy Load。

这个插件异常简洁，只有不到 50 行代码。专注于实现 Lazy Load 效果。正是我所推崇的插件类型。

下面介绍另外几个 Lazy Load 插件。

嗯，不同于前面介绍的 Lazy Load 插件，但是效果类似，下面提到的另外几个 jQuery 插件也是。如果你有兴趣，也可以修改源代码来使用 jQuery 插件 Lazy Load，只是修改调用的插件名称 jquery.sonar 为 jquery.lazyload，然后用 jquery.lazyload.js 替换源文件中的 jquery.sonar.js 即可。

SIMPLE-LAZYLOAD

对于在意过渡效果的朋友来说，simple-lazyload 可能更实用些。它的实现方法与上面的 Lazy Load 类似（jQuery 框架；新方法；没看出来用的是什么 jQuery 插件，也许是作者自己写的）。

这个插件比上面的 Lazy Load 增加了实现动态占位符（placeholder）的效果。如果浏览者已经翻到了页面下面，可是因为网速原因图片没有及时下载过来，用户就会看到一个转动的小圆圈，提示浏览者正在加载图片。

另外，根据插件的开发日志，似乎已经支持对整个页面的图片实现 Lazy Load 效果，而不仅仅是文章内容中的图片了。我没有实测，需要的同学可以去插件作者网站上的 simple-lazyload 页面（该链接已失效）看看或者咨询。

P.S. 也许是我感觉错误：在该插件的一个示例页面（该链接已失效），等所有真实图片都加载完毕，然后快速滚动页面的时候会有一顿一顿的感觉。不知道是插件问题还是别的问题。

BJ LAZY LOAD

BJ Lazy Load 的处理方法与前面介绍的一样。不过它使用的是 Sebastiano Armeli-Battana 开发的 jQuery 插件 queryAsynchImageLoader（该链接已失效）。

这个插件提供的功能多一些，当然代码也就复杂些了，大约有 500 行代码。其它功能比如可以使用 BJLL::filter() 方法来处理自定义模板中的图片。不过我估计一般人用不上这样的功能。而且作者还在筹划和开发其它一些功能。

JQUERY IMAGE LAZY LOAD WP

jQuery Image Lazy Load WP 正是使用前面介绍过的 jQuery 插件 Lazy Load 来实现此功能的。不过这个插件最后更新于一年多以前（2011-5-25），使用的方法还是旧的方法，现在已经不用了。而且其中调用的 Lazy Load 还是 1.5.0 版本，而最新的是 1.7.2 版本。

YS IMAGES LAZYLOAD (SERVER SIDE)

YS images lazyload (Server Side) 是 jQuery Image Lazy Load WP 的改进型，采用的是新方法，但是没有使用  <noscript> 方法来兼容不支持 JavaScript 的浏览器。

这个插件也很简洁，代码只有 30 来行。可惜作者应该不会再更新了，最后更新于半年前（2011-12-6）。

AI LOADER (JQUERY LAZY LOAD)

Ai Loader (jQuery Lazy Load) 也是使用的旧式处理方法，基于 jQuery，插件好像是作者自己写的（没介绍）。而且最后更新于 2010-12-31。

MOOTOOLS IMAGE LAZY LOAD WP

MooTools 是类似于 jQuery 的另一个 JavaScript 框架。MooTools Image Lazy Load WP 就是基于 MooTools 框架上的 Lazy Load 插件的。

既然 WordPress 中主要使用的是 jQuery 框架，而且该插件最后更新于 2010-12-16，咱就不费口舌了。

这就是我前几天折腾 Lazy Load 效果的心得了，希望能对大家有借鉴意义。个人推荐 Lazy Load，有需要的可以选择第二个 simple-lazyload。其它的就不用考虑了。

其它

另外还有实现评论作者头像（Avatar）延迟加载功能的 Comments Avatar Lazyload，Images Lazyload and Slideshow 和 Lazy Widget Loader（对边栏小工具实现 Lazy Load 效果）等也都是拥有 Lazy Load 功能的插件。不过因为不符合我的需求，就不再多介绍了。