Go to comments ↓ 2010年06月09日 - Home » Blog

启用 Lazy Load jQuery 插件

先吐槽一下，这几天主机的速度真不是一般的慢，打击更新欲望啊。
搬家的欲望再次萌生，可惜手头窘迫，再观望一下。

话说，最近抱着“既然加载了 jQuery，不多弄点功能，挺亏的”这种想法，折腾了些东西。比如之前的 Shadowbox。
现在又发现了这个叫做 Lazy Load 的 jQuery 插件，它的作用是延迟加载页面中的图片，还能为添加渐显特效。

详细介绍和使用方法见 mg12 的这篇：《Lazy Load, 延迟加载图片的 jQuery 插件》。
下面简单说下我的体验。

Lazy Load 的作用

Lazy Load 的作用简单来说就是：让网页元素加载顺序更加合理。
网页代码的载入顺序是从上到下，如果评论区域有大量小图片（头像、表情、以及其他评论者信息），会导致侧栏的显示较慢，体验不好。
有了 Lazy Load ，在不可见区域的图片会被延迟加载，可以说在相当程度上提升了速度，在长页面尤为明显。
正好我比较喜欢 WP-UserAgent 这类型的插件，那就更需要这个了。

而且 Lazy Load 的 FadeIn 效果，让我们向评论区滚动的时候，下面的头像和表情等图片会以渐显的方式刷出来，感觉相当棒（自我感觉…）。
Lazy Load 的打包版体积还不足 2K，相当的小巧。

如何使用 Lazy Load

到作者页面去下载该 js，http://www.appelsiini.net/projects/lazyload

将 js 上传到服务器。
加载 jQuery，如果你博客已经使用了 jQuery，请跳过这一步。
在 wp 主题模板加入以下代码：

<script type="text/javascript" src="jquery.lazyload.js"></script>
<script type="text/javascript">jQuery(document).ready(
 function($){
          $("img").lazyload({
             placeholder : "images/grey.gif",
             effect      : "fadeIn"
          });
      });
  </script>

要注意 js 和图片文件的路径。
“img”是指对页面上所有图片都应用这个效果。你也可以用 CSS 选择器来制定，比如 #content img。
grey.gif 是指占位图片，可以到点此下载一个 1×1 象素的图片。

不想折腾的话可以使用个 WordPress 插件： jQuery Image Lazy Load WP ，我没有测试过。

» 转载请以超链接形式注明来源：A.shun Blog » 《启用 Lazy Load jQuery 插件》
» 本文链接地址：http://shun.im/21363