Gravatar 是 gravatar 推出的一項服務，意為 「全球通用頭像」 。如果在 Gravatar 的服務器上放置了你自己的頭像，那麼在任何支持 Gravatar 的 blog 或者留言本上留言時，只要提供你與這個頭像關聯的 email 地址，就能夠顯示出你的 Gravatar 頭像來。

20151117102137

Gravatar 頭像使用起來確實很方便，但是在網站評論多了以後面臨的問題就是一大片頭像的加載。所以可以考慮延遲加載頭像，優化下網頁加載速度，提升用户體驗。

大家都知道有個 lazyload 的東西 可以讓你的頁面圖片在滾動到位置後才去顯示 通過這樣來實現加速打開頁面的效果。首先找到你的 WP 下面的 wp-includes/pluggable.php 文件，找到 get_avatar 函數 拉到最下面找到 （以下修改只會影響到你調用 get_avatar 顯示的頭像，需要其它圖片也這麼顯示的話 請自己修改） 。

1

$avatar="<img alt='{$safe_alt}' src='{$out}' height='{$size}' width='{$size}' />";

修改為

if(!is_admin()){

$avatar="<img alt='{$safe_alt}' src='http://cdn.xhsay.com/avatar/default.jpg' lazyload='{$out}' height='{$size}' width='{$size}' />";

}else{

$avatar="<img alt='{$safe_alt}' src='{$out}' height='{$size}' width='{$size}' />";

}

注意修改圖片地址為你的默認頭像地址，再加載上 JS 文件就可以在窗口滾動到圖片位置才顯示圖片。

jQuery(document).ready(function(){

varc=$("img.lazyload"),d=function(a){

varb=$(window).height()+$(document).scrollTop();

c.each(function(){

$(this).offset().top<b&&($(this).trigger("appear"),c=c.not(this));

}),0==c.length&&$(window).unbind("scroll",d);

};

c.each(function(){

$(this).one("appear",function(){

$(this).attr("src",$(this).attr("lazyload"));

});

}),$(window).bind("scroll",d),d();

});

原理很簡單，就是默認輸出的頭像全部都是你指定的默認頭像。然後通過 JS 來 把 lazyload 的值賦給 src 。然後窗口滾動到頭像位置的時候 再用 appear 去顯示它。

HOOK 方法：上面的方法在升級 WordPress 程序後，修改的文件會被覆蓋掉。可以自己在主題的 funtions.php 上寫個 Hook 代碼來解決。

將以下代碼加入主題 funtions.php 中：

functionmytheme_get_avatar($avatar){  

if(!is_admin()){

  $avatar=str_replace(array("src"),"src='http://cdn.xhsay.com/avatar/default.jpg' lazyload",$avatar);

  $avatar=str_replace(array("avatar-"),"lazyload avatar-",$avatar);

  }

return$avatar;  

}

add_filter('get_avatar','mytheme_get_avatar',10,3);
  • 首先你的主題使用的是 get_avatar 函數來調用頭像的，如果不是 請把最後一行的 get_avatar 替換成你自己的調用頭像函數
  • 如果你已經使用了 hook 的方法來緩存頭像到本地 那你可以直接把 兩句 str_replace 代碼加到你的緩存頭像函數最後的 return $avaatar 之前就可以了