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. if( strpos($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 。

本文禁止住转载。任何形式转载请联系作者（时光在路上 ｗｗｗ．ｔｉｍｅｚｌｓ．ｃｏｍ）。时光在路上保留所有权利

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

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

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

本文禁止住转载。任何形式转载请联系作者（时光在路上 ｗｗｗ．ｔｉｍｅｚｌｓ．ｃｏｍ）。时光在路上保留所有权利

注意，如果你也使用了延迟加载（懒加载）图片的 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);

大功告成，试一下吧！