wordpress代码实现gravatar头像lazyload的图片延迟加载效果

好易之 • 2020-05-27 00:32 • 技术文档 • 阅读 501

Gravatar是gravatar推出的一项服务，意为“全球通用头像”。如果在Gravatar的服务器上放置了你自己的头像，那么在任何支持Gravatar的blog或者留言本上留言时，只要提供你与这个头像关联的email地址，就能够显示出你的Gravatar头像来。

Gravatar头像使用起来确实很方便，但是在网站评论多了以后面临的问题就是一大片头像的加载。所以可以考虑延迟加载头像，优化下网页加载速度，提升用户体验。

大家都知道有个lazyload的东西可以让你的页面图片在滚动到位置后才去显示通过这样来实现加速打开页面的效果。首先找到你的WP下面的?wp-includes/pluggable.php文件，找到get_avatar函数拉到最下面找到（以下修改只会影响到你调用get_avatar显示的头像，需要其它图片也这么显示的话请自己修改）。

$avatar = "&lt;img alt='{$safe_alt}' src='https://www.xhsay.com/{$out}' class='avatar avatar-{$size} photo' height='{$size}' width='{$size}' /&amp;gt;";

修改为

if (!is_admin()) {
$avatar = "&lt;img alt='{$safe_alt}' src='https://www.xhsay.com/avatar/default.jpg' class='avatar avatar-{$size} photo lazyload' lazyload='https://www.xhsay.com/{$out}' height='{$size}' width='{$size}' /&gt;";
}else{
$avatar = "&lt;img alt='{$safe_alt}' src='https://www.xhsay.com/{$out}' class='avatar avatar-{$size} photo lazyload' height='{$size}' width='{$size}' /&gt;";
}

注意修改图片地址为你的默认头像地址，再加载上JS文件就可以在窗口滚动到图片位置才显示图片。

jQuery(document).ready(function() {
var c = $("img.lazyload"), d = function(a) {
var b = $(window).height() + $(document).scrollTop();
c.each(function() {
$(this).offset().top &lt; b &amp;&amp; ($(this).trigger("appear"), c = c.not(this));
}), 0 == c.length &amp;&amp; $(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中：

function mytheme_get_avatar($avatar) {
if (!is_admin()){
$avatar = str_replace(array("src"),"src='https://www.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之前就可以了

百度已收录

本文由【好易之】整理自网络！
原创文章，作者:【好易之】如转载请注明出处：https://www.zhengjiaxi.com/zxwd/jswd/69699.html
如有侵权，请邮件联系 aoduoye@qq.com 删除。
本站发布的文章及附件仅限用于学习和研究目的;不得将上述内容用于商业或非法用途，否则后果请用户自负。
本站信息来自网络，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。
如果您喜欢该程序，请支持正版软件，购买注册，得到更好的正版服务。如有侵权请邮件与我们联系处理。