现在的位置:首页>wordpress>正文

wordpress评论延迟加载和Gravatar头像悬停的实现

2016年07月04日 ⁄ 共 2273字 评论 2 条

Gravatar头像,早在一年前,就已经被墙掉了.福利老幺目前使用的是多说的图像缓存,但还是有一部分朋友,在追求wordpress的完美功能,特别是一些文章评论内容多的站点,都在想办法来实现评论延迟加载和Gravatar头像悬停.

一起先来了解一下实现的原理:首先获取评论对应gravatar头像的url,把它放在某个标签定义一个值来保存,比如data-url或gravatar-url,然后输出前先让头像img标签的src显示为自定义头像(也就是加载前图像)的地址链接,最后鼠标悬停该条评论时通过attr方法抓取保存好的gravatar-url,再用attr去设置img为src值(相当于替换),这样就完成了延迟加载的整个过程.

1.首先是gravatar头像链接的获取

方法有很多,一般评论列表模板的输出都有gravatar头像链接的输出,变量大多是这样子的:

  1. $avatar = get_avatar ( $comment->comment_author_email, 50 );

2.如果要完全抓取原始的gravatar网的链接可以用一个php函数来正则匹配出来:

  1. // 正则匹配出gravatar中src的头像链接,from www.fuli121.com
  2. function get_avatar_url($get_avatar){
  3.     preg_match("/src='(.*?)'/i"$get_avatar$matches);
  4.     return $matches[1];
  5. }

3.定义一个属性存值

有了上面的函数,可以用php输出头像,比如:

  1. <img gravatar-url="<?php echo get_avatar_url(get_avatar ( $comment->comment_author_email, 50 )) ?>" src="头像加载前显示的图像地址链接" class="avatar" width="50" height="50" alt="×××" />

注意,此时我们使用了gravatar-url来保存输出的真实头像地址。至于加载前显示什么头像 这个可以自定.

用JS控制悬停评论时进行地址替换

主要是先判断显示的为移动设备还是PC,若是移动设备则鼠标悬停的事件为touchstart,若是PC则为mouseenter,并且悬停后我们给这条评论标签加一个class,加个判断:如果存在这个class,那么就不需要再执行替换操作,不会造成重复执行,剩下的就是attr抓取gravatar-url值,再attr设置src即可.

  1. // 头像悬停时显示真实头像 from www.fuli121.com
  2. var isIPhone = /iPhone/i.test(navigator.userAgent),
  3.     isIPad = /iPad/i.test(navigator.userAgent),
  4.     isAndroid = /android/i.test(navigator.userAgent);
  5. var isMobile = isIPhone  || isIPad || isAndroid;
  6. var hoverEvent = isMobile ? "touchstart" : "mouseenter"// 移动设备用touchstart事件,PC用mouseenter事件
  7. $(document).on(hoverEvent, "#thecomments .comment-container"function(e) {
  8.     var hoverObject = $(this); // 悬停对象
  9.     if(!hoverObject.hasClass('avatarShow')){ // 如果没有avatarShow这个类
  10.         hoverObject.addClass('avatarShow'); // 那么添加avatarShow类
  11.         $this = hoverObject.parent().children().eq(0).find("img"), // 找到头像img标签
  12.         url = $this.attr('gravatar-url'); // 抓取gravatar-url的值(这个值是真实的gravatar链接)
  13.         $this.attr('src',url); // 将img标签的src属性值设置为gravatar的真实链接
  14.     }
  15. });

以上三个步骤在明白原理之后可以自由发挥,原作者处是用$this.data("url")方法来获取头像链接的,有所不同,另外相应的选择器要替换为你自己对应的标签位置的id或class.

评论延迟加载和Gravatar头像悬停的效果

这里无法用图片来显示,具体说来就是很像挤气泡膜一样,刷出来一个还想刷下一个.和网站的图片延时加载的效果差不多.

 

 

小结

文章中的方法来源自网络,由福利老幺整理发布.

关于Gravatar头像,福利老幺真想吐槽一下,现在的多说,也是只能显示部分.真想不通,连Gravatar居然也会连不上,天朝啊.

评论 2 条 评论内容很精采,有内幕,而且绝对有干货

  1. 夏日博客 2016年07月05日 12:01  @回复  Δ-49楼 回复

    被墙之后,G头像就出现了各种各样的问题。


    • 管理员
      管理员 2016年07月05日 13:11  @回复  ∇地下1层 回复

      是的,我现在的用多说,很多头像不全面,没法显示.

给我留言