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 也沒壓縮，還有一定的提升潛力。