之前Gravatar 服务器被墙被迫使用了https 的头像，还有七牛缓存和反向代理各种方法。但是不管用啥都有抽风的时候，本来网站速度挺快的，因为个破头像慢要死，于是就有了废掉这货的想法。一开始想的是自己做个头像系统，但是毕竟登录的人毕竟不多，还是行不通。也有过使用lazyload 的想法，说实话我对那个插件没啥好感，总感觉页面滚起来卡卡的- -然后就弄了现在这个。
默认不加载头像，只有鼠标划过评论的时候才显示头像。PC端用了mouseentter，移动端了使用touchstart 事件，虽然不是很完美，但是至少提速了。
获取头像地址，这段代码放到functions.php中：
- functionget_avatar_url($get_avatar){
- preg_match(“/src=’https://www.xhsay.com/(.*?)%E2%80%99/i%E2%80%9D,%C2%A0$get_avatar,$matches);
- return$matches[1];
- }
将你的头像替换成如下结构：
- <divclass=”comment-avatar”data-url=”<?phpechoget_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:centercenter;background-size:cover;border-radius:100%;background-image:url(person.svg)}
下面代码放到你的JS文件中，代码中简单判定是否是移动设备并选择相应事件：
- varisIPhone=/iPhone/i.test(navigator.userAgent),
- isIPad=/iPad/i.test(navigator.userAgent),
- isAndroid=/android/i.test(navigator.userAgent);
- varisMobile=isIPhone||isIPad||isAndroid;
- varavatarEvent=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也没压缩，还有一定的提升潜力。
本文由【好易之】整理自网络！
原创文章，作者:【好易之】如转载请注明出处：https://www.zhengjiaxi.com/zxwd/jswd/69796.html
如有侵权，请邮件联系 aoduoye@qq.com 删除。
本站发布的文章及附件仅限用于学习和研究目的;不得将上述内容用于商业或非法用途，否则后果请用户自负。
本站信息来自网络，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。
如果您喜欢该程序，请支持正版软件，购买注册，得到更好的正版服务。如有侵权请邮件与我们联系处理。
原创文章，作者:【好易之】如转载请注明出处：https://www.zhengjiaxi.com/zxwd/jswd/69796.html
如有侵权，请邮件联系 aoduoye@qq.com 删除。
本站发布的文章及附件仅限用于学习和研究目的;不得将上述内容用于商业或非法用途，否则后果请用户自负。
本站信息来自网络，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。
如果您喜欢该程序，请支持正版软件，购买注册，得到更好的正版服务。如有侵权请邮件与我们联系处理。
微信扫一扫 
