方法出处

该方法出自大发,原文链接:http://fatesinger.com/74796
具体可以到原作者处参详,下面只说明原理,并且根据我自己的主题做了相应的调整。

大致思路原理

首先获取评论对应gravatar头像的url,把它放在某个标签定义一个值来保存,比如data-url或gravatar-url,然后输出前先让头像img标签的src显示为自定义头像(也就是加载前图像)的地址链接,最后鼠标悬停该条评论时通过attr方法抓取保存好的gravatar-url,再用attr去设置img为src值(相当于替换),这样就完成了延迟加载的整个过程。

首先是gravatar头像链接的获取

方法有很多,一般评论列表模板的输出都有gravatar头像链接的输出,变量大多是这样子的:
$avatar = get_avatar ( $comment->comment_author_email, 50 );
如果要完全抓取原始的gravatar网的链接可以用一个php函数来正则匹配出来:

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

定义一个属性存值

有了上面的函数,可以用php输出头像,比如

<img gravatar-url="<?php echo get_avatar_url(get_avatar ( $comment->comment_author_email, 50 )) ?>" src="头像加载前显示的图像地址链接" class="avatar" width="50" height="50" alt="×××" />

注意,此时我们使用了gravatar-url来保存输出的真实头像地址。至于加载前显示什么头像 这个可以自定。

用JS控制悬停评论时进行地址替换

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

// 头像悬停时显示真实头像
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的真实链接
    }
});

以上三个步骤在明白原理之后可以自由发挥,原作者处是用$this.data("url")方法来获取头像链接的,有所不同,另外相应的选择器要替换为你自己对应的标签位置的id或class。对了,这玩意儿很像挤气泡膜一样,刷出来一个还想刷下一个 有木有? Cheers!