不少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！