WordPress教程: gravatar 头像延迟加载

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

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

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

  1. functionget_avatar_url($get_avatar){
  2. preg_match(“/src=’https://www.xhsay.com/(P t ^ $ {.*?)%E2%80%99/i%E2%80%9D,%C2%A0$get_avatar,$matches);
  3. return$matches[1];
  4. }

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

  1. <divclass=”comment-avatar”data-url=”<?phpechoget_avatar_url(get_avatar($comment,$size=’40’));?>”></div>

参考CSSw i – 8 H 6 .

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

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

  1. varisIPhone=/iPhone/i.test(navigator.userAgent),
  2. isIPad=/iPad/i.test(navigator.userAgent),
  3. isAndroid=/android/i.test(navigator.userAgent);
  4. varisMobile=isIPhone||isIPad||isAndroid;
  5. varavatarEvent=isMobile?“touchstart”:“mouseenter”;
  6. jQuery(document).on(avatarEvent,“#comments.comment-block”,function(e){
  7. var_self=jQuery(this);
  8. if(!_self.hasClass(‘done’)){
  9. _self.addClass(‘done’);
  10. $this=_self.children().find(“.comment-avatar”),url=$this.data(“url”);
  11. $this.css({
  12. “background-image”:”url(”+url+“)”
  13. })
  14. }
  15. });

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

技术教程

WordPress教程: 4.2 评论表情失效解决方法

2020-12-5 11:57:35

技术教程

如何隐藏WordPress后台的显示选项和帮助选项卡

2020-12-5 11:57:37

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
今日签到
有新私信 私信列表
搜索