延时加载iNove主题的评论者头像

发表评论 阅读评论

评论者头像一般都不在网页的首屏显示,但是通常都是自动加载的,这样就会拖慢网页打开的速度.解决办法就是在还没没有显示前先不加载.就跟微博那样的.微博是用的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插件获取到的图片为展位图像,不知道怎么过滤掉,就没做成插件了,嘿嘿,谁知道的也可以帮忙告诉我下,我好将这个东东做成插件,方便大家使用. 现在已经做成插件了,并且解决了以上的问题和任意主题.

  1. | |

    这个玩意不能写成一个插件来实现吗?

  2. | |

    @深夜的蚊子
    我也想做成插件,如果那样就WP-RecentComments就获取不到真实的头像地址了,我再看看WP-RecentComments的源码,看看怎么解决

  3. | |

    @lite3
    有劳了,顺便想想看,非头像是否也能做到延时加载,这样就更完美了。

  4. | |

    @深夜的蚊子
    整条评论延时加载那就是Ajax了,应该有现成的插件的,我上面说了,这样对seo不友好,所以不会做这个的,呵呵,我们还想搜索引擎能通过评论内容来找个这篇文章的,如果用了Ajax,搜索引擎就搜不到评论内容了.

  5. | |

    @lite3
    我说的不是评论,是图片类,比如,你在文章中加入了很多图像文件,让这些图像文件延时加载
    对于文章内容和评论,不用做到延时。

  6. | |

    @深夜的蚊子
    哦,文章内的图片是可以的,原理是一样的

  7. |

    深夜的蚊子 :
    @lite3
    我说的不是评论,是图片类,比如,你在文章中加入了很多图像文件,让这些图像文件延时加载
    对于文章内容和评论,不用做到延时。

    这个是有插件可以实现的,原理如此类似

回到顶部