评论者头像一般都不在网页的首屏显示,但是通常都是自动加载的,这样就会拖慢网页打开的速度.解决办法就是在还没没有显示前先不加载.就跟微博那样的.微博是用的Ajax实现的,但是Ajax对搜索引擎不好,我们这里还想让搜索引擎搜到我们的评论内容呢.嘿嘿,所以我们需要一个折中的办法:评论内容正常加载,只将评论者头像先用另一个图像占位,等滚屏到该头像时再用真实的头像替换.

其实直接设置img的src属性为空也是可以的,但是在加载的时候就会看到一个叉,那样很不友好.如果使用一个loading的gif图片,那么当刚看到图片的时候,显示的是loading图片(占位图像),也就是说正在加载中.这样就会友好很多了.

这里只讲iNove主题的修改方式,其他主题可以依照这个修改.

上传占位图像

找一个占位图像,并上传到空间,例如{wordpress目录}/wp-content/themes/inove/img/loading-m.gif
当然也可以将我用的占位图像上传到你的空间.不要使用我的,我有防盗链的.

修改head.php

找到head.php并修改,路径为{wordpress目录}/wp-content/themes/inove/head.php
在标签前添加以下代码:

<script type='text/javascript' src='http://yourdomain.com/wp-includes/js/jquery/jquery.js'></script>
<script type='text/javascript'>
/* lazy load */
jQuery(function (){
var elements = jQuery('#comments').find('img');
var checkShow=function(event) {
    var fold = jQuery(window).height() + jQuery(window).scrollTop();
    elements.each(function(){
        if(fold>jQuery(this).offset().top){
            jQuery(this).trigger("appear");
            elements = elements.not(this);
        }
    });
    if(0==elements.length){jQuery(window).unbind("scroll",checkShow);}
};
elements.each(function(){
    jQuery(this).one("appear",function(){jQuery(this).attr("src",jQuery(this).attr("longdesc"));});
});
jQuery(window).bind("scroll", checkShow);
checkShow();
});
</script>

请自行替换上面的yourdomain.com为你的域名.如果本身已经添加了jquery.js,请去掉以上代码的第一行.

修改function.php

找到function.php并修改,路径为{wordpress目录}/wp-content/themes/inove/function.php

搜索function custom_comments($comment, $args, $depth)函数,并在其上面添加以下代码:

/* lazy load comments avatar */
function get_avatar_lazyload($avatar) {
    $avatar = str_replace(' src=', ' longdesc=', $avatar);
    $avatar = str_replace('<img', '<img src=\'http://yourdomain.com/wp-content/themes/inove/img/loading-m.gif\'', $avatar);
    return $avatar;
}

请自行替换上面的yourdomain.com为你的域名.

在function custom_comments($comment, $args, $depth)函数里的html代码里找到以下代码:

<?php if (function_exists('get_avatar') && get_option('show_avatars')) { echo get_avatar($comment, 32); } ?>

替换为:

<?php if (function_exists('get_avatar')&& get_option('show_avatars')) { echo get_avatar_lazyload(get_avatar($comment, 32)); } ?>

到此,大功告成,function.php和head.php,查看效果吧.

非iNove主题

其实非iNove主题要修改也是很方便的,如果没有使用WP-RecentComments插件,对于function.php的修改反而更简单呢.只要将以下代码添加到主题目录下的function.php内就行了.

/* lazy load comments avatar */
add_filter('get_avatar', get_avatar_lazyload, 10, 1);
function get_avatar_lazyload($avatar) {
    $avatar = str_replace(' src=', ' longdesc=', $avatar);
    $avatar = str_replace('<img', '<img src=\'http://yourdomain.com/wp-content/themes/inove/img/loading-m.gif\'', $avatar);
    return $avatar;
}

请自行替换上面的yourdomain.com为你的域名.

结后语

本来想把这个东西做成插件方便大家使用的,但是由于使用add_filter后,WP-RecentComments插件获取到的图片为展位图像,不知道怎么过滤掉,就没做成插件了,嘿嘿,谁知道的也可以帮忙告诉我下,我好将这个东东做成插件,方便大家使用. 现在已经做成插件了,并且解决了以上的问题和任意主题.