WordPress用jquery.lazyload.js實現圖片延遲加載

2014-08-04 10:26:15來源:知更鳥作者:

新版 jquery.lazyload.js 插件,要求必須給圖片地址添加一個data-original屬性,這樣才能啟用延遲加載。說明請到官網查看:Lazy Load Plugin for jQuery

新版 jquery.lazyload.js 插件,要求必須給圖片地址添加一個data-original屬性,

<img class="lazy" data-original="img/example.jpg" width="640" height="480">

這樣才能啟用延遲加載。說明請到官網查看:Lazy Load Plugin for jQuery

具體實現方法:

一、添加必要的JS文件

首先下載相關JS文件,并放到主題“js”文件夾中

jquery.lazyload.js下載地址:http://pan.baidu.com/s/1c0lGqq8

將下面代碼添加到主題頭部header.php模板中:

<script src="<?php echo get_template_directory_uri(); ?>/js/jquery.min.js" type="text/javascript"></script>
<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 屬性

按官網的要求插入圖片時必須添加一個data-original屬性,手動添加很麻煩,還好有人已提供自動為圖片添加data-original 屬性的方法,將下面代碼添加到主題 functions.php 中:

add_filter ('the_content', 'lazyload');
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頭像調用標準函數:

<?php echo get_avatar( $comment, '32' ); ?>

也同樣可以實現Wordpress頭像延遲加載。

優點:只有瀏覽到圖片位置時才加載圖片,可以提高多圖片頁面的加載速度,減輕服務器負擔。

缺點:可能會影響到搜索引擎對圖片的收錄,還有就是部分瀏覽器打開頁面會出現空白。
 

贊助商鏈接:

排列五开奖结果2007年