WordPress4.2版本后gravatar头像延迟加载

WordPress升级到4.2版本后,之前的Gravatar头像悬停评论延迟加载代码就失效了,幸好大发及时贴出了新代码:

一、获取头像地址,这段代码放到functions.php

function fa_get_avatar_url($get_avatar){
    preg_match("/src='(.*?)'/i", $get_avatar, $matches);
    return $matches[1];
}

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

<div class="comment-avatar" data-url="<?php echo fa_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代码

下面代码放到你的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 + ")"
	})
	}
});

本人比较懒,自用主题暂时没用这个代码了,省的下次更新还要改代码,再说万网免费主机速度还不错,不在乎那点小速度。╮( ̄▽ ̄”)╭
方法摘自:http://fatesinger.com/74796

本文共 28 个回复

  1. wys.me says:
    新版本有哪些特点?在你的博客上的变化是什么,好像没发现啊 :mrgreen:
  2. Specs says:
    是用的免费的那个万网空间吗?
      1. AngelFrdom says:
        @小二苘 我想办法再次提高加速。。。但是服务器位于japan,受到干扰比原来厉害了
  3. 夏日博客 says:
    Gravatar已经被屏蔽掉了,还是使用缓存的好。
  4. Hooli says:
    https://me.hub.moe/archives/651 这样替换省事。 :smile:
  5. 顾夕舞 says:
    坚决不更新,貌似新版有些问题...... :twisted:
  6. p2p网贷 says:
    菜苗网拥有强大、专业的技术研发团队,研发人员多来自于英特尔、微软等互联网顶尖公司

发表留言,喵!