• 开启全站HTTPS。2017-04-29
  • 本站为非盈利性站点,所得收入全部用于网站服务器及其他费用。2015-10-15
  •    2年前 (2016-05-10)  WordPress教程 |   抢沙发  23 
    文章评分 0 次,平均分 0.0

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

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

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

    function get_avatar_url($get_avatar){
    preg_match(“/src='(.*?)’/i”, $get_avatar, $matches);
    return $matches[1];
    }

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

    <div class=”comment-avatar” data-url=”<?php echo 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文件中,代码中简单判定是否是移动设备并选择相应事件:

    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 + “)”
    })
    }
    });

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

     

    除特别注明外,本站所有文章均为小浩博客原创,转载请注明出处来自https://www.xhsay.com/avatar-delayed-loading.html

    关于
    小浩博客(www.xhsay.com)是由Tovey建立的个人站点,主要致力于整合并分享各种互联网及网站建设的资源。

    发表评论

    表情 格式

    暂无评论

    切换注册

    登录

    忘记密码 ?

    您也可以使用第三方帐号快捷登录

    切换登录

    注册