WordPress实现用户头像缓存到本地并将无头像用户按字母头像分配给

本文讲述的是如何将提高 WordPress 用户头像(Gravatar)加载速度的两个方法合并处理,即将有 Gravatar 头像的用户的头像下载到本地缓存,并且将无Gravatar头像的用户的头像,用 LetterAvatar 实现纯前端生成字母头像。

我这仅仅是提供一些思路,需要对一些代码进行改动。

首先是对有 Gravatar 头像用户的头像执行本地缓存

这个,我这里就不多说了。

WordPress实现用户头像缓存到本地并将无头像用户按字母头像分配给

 

因为后面要给无 Gravatar 头像的用户分配字母头像,所以需要判断哪些是无 Gravatar 头像用户,并给这类用户的头像指定一个类(class),暂且定为 class="letteravatar" ,根据 class 来设定头像的 CSS(非必要操作) 和执行后面 JavaScript 代码。

那么,露兜博客中,后面的代码 $avatar = "<img alt='{$alt}' src='{$a}' class='avatar
avatar-{$size} photo' height='{$size}' width='{$size}' />"
要 改为:

  1. ifstrpos($a,'default') ){
  2.     $avatar = "<img alt='{$alt}' src='{$a}' class='avatar avatar-{$size} photo letteravatar' height='{$size}' width='{$size}' />";
  3. else {
  4.     $avatar = "<img alt='{$alt}' src='{$a}' class='avatar avatar-{$size} photo' height='{$size}' width='{$size}' />";
  5. }

即通过判断来增加了一个 class:letteravatar 。

本文禁止住转载。任何形式转载请联系作者(时光在路上 www.timezls.com)。时光在路上保留所有权利

中的代码可根据自身需要而进行必要的修改。

第二步:使用 LetterAvatar js 代码生成字母头像

完整代码可以在此查看并复制

本文禁止住转载。任何形式转载请联系作者(时光在路上 www.timezls.com)。时光在路上保留所有权利

注意,如果你也使用了延迟加载(懒加载)图片的 js 代码,一定要将下面这段代码在懒加载代码之前加载。

原 js 代码需要略微修改,参见下面代码中的注释内容:

  1. LetterAvatar.transform = function() {
  2.     Array.prototype.forEach.call(d.querySelectorAll(".letteravatar[alt]"),  //此处将原代码中的 img[alt] 变为 .letteravatar[alt]
  3.     function(img, name, color) {
  4.         name = img.getAttribute("alt");
  5.         color = img.getAttribute("color");
  6.         img.src = LetterAvatar(name, img.getAttribute("width"), color);
  7.         img.removeAttribute("alt"); //此处将原代码的 avatar 变为 alt
  8.         img.setAttribute("alt", name)
  9.     })
  10. };
  11. if (typeof define === "function" && define.amd) {
  12.     define(function() {
  13.         return LetterAvatar
  14.     })
  15. else {
  16.     if (typeof exports !== "undefined") {
  17.         if (typeof module != "undefined" && module.exports) {
  18.             exports = module.exports = LetterAvatar
  19.         }
  20.         exports.LetterAvatar = LetterAvatar
  21.     } else {
  22.         window.LetterAvatar = LetterAvatar;
  23.         d.addEventListener("DOMContentLoaded",
  24.         function(event) {
  25.             LetterAvatar.transform()
  26.         })
  27.     }
  28. }
  29. })(window, document);

大功告成,试一下吧!