新版 jquery.lazyload.js 插件，要求必須給圖片地址添加一個data-original屬性，
<img class="lazy" data-original="img/example.jpg" width="640" height="480">
這樣才能啟用延遲加載。說明請到官網(wǎng)查看：Lazy Load Plugin for jQuery
具體實現(xiàn)方法：
一、添加必要的JS文件
首先下載相關(guān)JS文件，并放到主題“js”文件夾中
jquery.lazyload.js下載地址：http://pan.baidu.com/s/1c0lGqq8
將下面代碼添加到主題頭部header.php模板中：
<script src="<?php echo get_template_directory_uri(); ?>/js/jquery.lazyload.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("img").lazyload({
effect:"fadeIn"
});
});
</script>
二、為圖片自動添加 data-original 屬性
按官網(wǎng)的要求插入圖片時必須添加一個data-original屬性，手動添加很麻煩，還好有人已提供自動為圖片添加data-original 屬性的方法，將下面代碼添加到主題 functions.php 中：
function lazyload($content) {
$loadimg_url=get_bloginfo('template_directory').'/img/loading.gif';
if(!is_feed()||!is_robots) {
$content=preg_replace('/<img(.+)src=[\'"]([^\'"]+)[\'"](.*)>/i',"<img\$1data-original=\"\$2\" src=\"$loadimg_url\"\$3> <noscript>\$0</noscript>",$content);
}
return $content;
}
將一張加載動畫圖片放到主題圖片文件夾img中
另外，Wordpress頭像延遲加載，可以用下面的代碼：
<?php echo '<img class="avatar" src="' . get_bloginfo('template_directory') . '/img/loading.gif" alt="avatar" data-original="' . preg_replace(array('/^.+(src=)(\"|\')/i', '/(\"|\')\sclass=(\"|\').+$/i'), array('', ''), get_avatar( $comment, '64' )) . '" />'; ?>
替換gravatar頭像調(diào)用標(biāo)準(zhǔn)函數(shù)：
<?php echo get_avatar( $comment, '32' ); ?>
也同樣可以實現(xiàn)Wordpress頭像延遲加載。
優(yōu)點：只有瀏覽到圖片位置時才加載圖片，可以提高多圖片頁面的加載速度，減輕服務(wù)器負(fù)擔(dān)。
缺點：可能會影響到搜索引擎對圖片的收錄，還有就是部分瀏覽器打開頁面會出現(xiàn)空白。