不少WordPress 主题（包括DeveWork.com目前的主题）都有部署jquery 插件“懒加载”（Lazy Load），但其实很多都不能产生真正的懒加载（包括本站主题），充其量只是有个“淡入淡出”的特效——中看不中用，伪懒加载。本文主要教你如何修改代码实现主题上真正的懒加载。

注：最近在折腾 Jeff的阳台 新的主题，已经在上面部署真正的Lazy Load，本站主题的“伪懒加载”暂时搁着先；如果要查看效果，过几天前往Jeff的阳台看看吧~

懒加载（Lazy Load）的一些入门导航

关于懒加载（Lazy Load）插件的介绍，本文不再累赘。可以参考mg12 的《Lazy Load, 延迟加载图片的 jQuery 插件》，该文章已经非常较详细了。一些难理解的知识点可以参考该文。

WordPress 中部署真正的懒加载（Lazy Load）

根据资料，可知要实现懒加载，图片img 标签必须如下面那样写：

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

即将占位图片grey.gif 写在地址上（src），而真正的地址则用 data-original来引用。当Lazy Load 运行时候，便会将src 修改为data-original 的图片地址，以此达到懒加载的目的。

但如果是在WordPress 中，文章的图片要按照这个实现，必须手动修改html 代码；如果图片多，那可真是费时费力；如果图片少，那也根本没有用懒加载的需要。因此，文章中的图片（编辑器写成的文章中的图片），除非特殊情况，否则没必要去弄这个懒加载。

那么，在WordPress 中，懒加载（Lazy Load）可以运用在哪里了？

图片缩略图，还有头像图片。

缩略图的懒加载

相信不少博客主题的首页文章排版都是 缩略图+文章摘要 的格式，其中的缩略图不少还是用timthumb 截图的。那么这种排版格式就给懒加载提供了便利，我们只需要小小改动一下代码。

对于缩略图，找到代码可能如下：

<img src="<?php bloginfo('template_url'); ?>/timthumb.php?src=<?php echo post_thumbnail_src(); ?>&h=150&w=200&zc=1"  alt="<?php the_title(); ?>"/>

那么修改为如下即可：

<img class="lazy" src="/image-pending.gif" data-original="<?php bloginfo('template_url'); ?>/timthumb.php?src=<?php echo post_thumbnail_src(); ?>&h=150&w=200&zc=1"  alt="<?php the_title(); ?>"/>

头像图片的懒加载

正常的话，头像的加载在WordPress 中是用诸如<?php echo get_avatar($user_email, 40); >的函数，在前台生成的html 代码其实也是img 标签，该函数其实与下面的代码差不多：

<img width="40" height="40" class="comments-widget-avatar alignleft" src="http://www.gravatar.com/avatar/'.md5(strtolower(get_comment_author_email())).'?s=40&r=g 
">

要部署懒加载，先将<?php echo get_avatar($user_email, 40); >函数改为如上面的代码，然后再改为如下：

<img width="40" height="40" class="lazy comments-widget-avatar alignleft" src="/image-pending.gif" data-original ="http://www.gravatar.com/avatar/'.md5(strtolower(get_comment_author_email())).'?s=40&r=g 
">

完成后用开发者工具查看是否是真的懒加载？？Of course！