【收藏整理】Gravatar头像悬停评论延迟加载

之前看到JV菊苣的新文章《Gravatar头像悬停评论延迟加载》,感觉挺不错的,立马去请教菊苣怎么用在我这个主题上,JV菊苣根据我的主题结构帮我详细的讲解了怎么用,然后今天就抽空用上去了。

JV菊苣的大致思路原理:
首先获取评论对应gravatar头像的url,把它放在某个标签定义一个值来保存,比如data-url或gravatar-url,然后输出前先让头像img标签的src显示为自定义头像(也就是加载前图像)的地址链接,最后鼠标悬停该条评论时通过attr方法抓取保存好的gravatar-url,再用attr去设置img为src值(相当于替换),这样就完成了延迟加载的整个过程。
根据JV菊苣的方法,我是这样做的:
一、将我的主题模板functions.php里的获取头像代码<?php echo get_avatar( $comment, 50 ); ?> 改成<img gravatar-url="<?php echo get_avatar_url(get_avatar( $comment, 50 )); ?>" src="<?php echo get_stylesheet_directory_uri();?>/images/delayavatar.svg" width="50" height="50"/>

其中delayavatar.svg就是真实头像显示前的图片。
二、如果要完全抓取原始的gravatar网的链接可以用一个php函数来正则匹配出来,在functions.php里加上代码:

// 正则匹配出gravatar中src的头像链接
function get_avatar_url($get_avatar){
    preg_match("/src='(.*?)'/i", $get_avatar, $matches);
    return $matches[1];
}

三、用JS控制悬停评论时进行地址替换,我把下面代码放到我主题的navigation.js里面

JV的原话:

主要是先判断显示的为移动设备还是PC,若是移动设备则鼠标悬停的事件为touchstart,若是PC则为mouseenter,并且悬停后我们给这条评论标签加一个class,加个判断:如果存在这个class,那么就不需要再执行替换操作,不会造成重复执行,剩下的就是attr抓取gravatar-url值,再attr设置src即可。

以下是JV贴的代码:

// 头像悬停时显示真实头像
var isIPhone = /iPhone/i.test(navigator.userAgent),
    isIPad = /iPad/i.test(navigator.userAgent),
    isAndroid = /android/i.test(navigator.userAgent);
var isMobile = isIPhone  || isIPad || isAndroid;
var hoverEvent = isMobile ? "touchstart" : "mouseenter"; // 移动设备用touchstart事件,PC用mouseenter事件
$(document).on(hoverEvent, "#thecomments .comment-container", function(e) {
    var hoverObject = $(this); // 悬停对象
    if(!hoverObject.hasClass('avatarShow')){ // 如果没有avatarShow这个类
        hoverObject.addClass('avatarShow'); // 那么添加avatarShow类
        $this = hoverObject.parent().children().eq(0).find("img"), // 找到头像img标签
        url = $this.attr('gravatar-url'); // 抓取gravatar-url的值(这个值是真实的gravatar链接)
        $this.attr('src',url); // 将img标签的src属性值设置为gravatar的真实链接
    }
});

然后根据JV说的,把.parent()去掉,再把上面的#thecomments .comment-container这个选择器改成我的#comments .comment-wrap

最后大功告成!

 

此方法出自大发,原文链接:http://fatesinger.com/74796

最后根据JV指导用上了,原文链接:http://www.inlojv.com/wordpress-gravatar-hover-comtdelay-load.html

本文共 18 个回复

      1. 王语双 says:
        @小二苘 就是的。因为申请了一个免费主机,不知用来干什么。。。刚才愣了好久的神,才想起来还差一个web电子相册——类似QQ空间那种。还好,找到一个,不过官方好像好久没动静了。 :wink:
  1. Accn says:
    发哥那有一个类似的 貌似 http://fatesinger.com/74796
  2. zllz says:
    话说你的网名是啥意思了? :eek:
  3. JJlin says:
    我的回复位置就在头像上......也被头像加载拖慢了不少!
  4. eddie32 says:
    申请了一个万网网址, 正在备案中。 话说这个加class功能挺管用的呢。 下一步的折腾计划是什么呢? Blog各方面感觉已经很完善了。

发表留言,喵!