WordPress gravatar 头像延迟加载

By Bigfa：之前 Gravatar 服务器被墙被迫使用了 https 的头像，还有七牛缓存和反向代理各种方法。但是不管用啥都有抽风的时候，本来网站速度挺快的，因为个破头像慢要死，于是就有了废掉这货的想法。一开始想的是自己做个头像系统，但是毕竟登录的人毕竟不多，还是行不通。也有过使用 lazyload 的想法，说实话我对那个插件没啥好感，总感觉页面滚起来卡卡的- -然后就弄了现在这个。

默认不加载头像，只有鼠标划过评论的时候才显示头像。 PC 端用了 mouseentter，移动端了使用 touchstart 事件，虽然不是很完美，但是至少提速了。

获取头像地址，这段代码放到 functions.php 中：

function get_avatar_url($get_avatar){
preg_match(“/src='(.*?)’/i”, $get_avatar, $matches);
return $matches[1];
}

将你的头像替换成如下结构：

<div class=”comment-avatar” data-url=”<?php echo get_avatar_url(get_avatar( $comment, $size = ’40’));?>”></div>

参考 CSS：

.comment-avatar{float:left;margin-top:2px;position:relative;height:40px;width:40px;background-color:#f0f0f0;background-origin:border-box;background-position:center center;background-size:cover;border-radius:100%;background-image:url(person.svg)}

下面代码放到你的 JS 文件中，代码中简单判定是否是移动设备并选择相应事件：

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 avatarEvent = isMobile ? “touchstart” : “mouseenter”;
jQuery(document).on(avatarEvent, “#comments .comment-block”, function(e) {
var _self = jQuery(this);
if(!_self.hasClass(‘done’)){
_self.addClass(‘done’);
$this = _self.children().find(“.comment-avatar”), url = $this.data(“url”);
$this.css({
“background-image”:”url(” + url + “)”
})
}
});

不加载头像之后速度飞起啊，完成了 3 秒之内加载完毕的指标。目前 JS 没完全合并，CSS 也没压缩，还有一定的提升潜力。