本文讲述的是如何将提高 WordPress 用户头像（Gravatar）加载速度的两个方法合并处理，即将有 Gravatar 头像的用户的头像下载到本地缓存，并且将无Gravatar头像的用户的头像，用 LetterAvatar 实现纯前端生成字母头像。
我这仅仅是提供一些思路，需要对一些代码进行改动。
首先是对有 Gravatar 头像用户的头像执行本地缓存
这个，在 露兜博客 中有详细介绍，包括代码，我这里就不多说了。
因为后面要给无 Gravatar 头像的用户分配字母头像，所以需要判断哪些是无 Gravatar 头像用户，并给这类用户的头像指定一个类（class），暂且定为 class="letteravatar" ，根据 class 来设定头像的 CSS（非必要操作） 和执行后面 JavaScript 代码。
那么，露兜博客中，后面的代码 $avatar = "<img alt='{$alt}' src='{$a}' class='avatar avatar-{$size} photo' height='{$size}' width='{$size}' />" 要 改为：
- if( strpos($a,'default') ){
- $avatar = "<img alt='{$alt}' src='{$a}' class='avatar avatar-{$size} photo letteravatar' height='{$size}' width='{$size}' />";
- } else {
- $avatar = "<img alt='{$alt}' src='{$a}' class='avatar avatar-{$size} photo' height='{$size}' width='{$size}' />";
- }
即通过判断来增加了一个 class：letteravatar 。
本文禁止住转载。任何形式转载请联系作者（时光在路上 ｗｗｗ．ｔｉｍｅｚｌｓ．ｃｏｍ）。时光在路上保留所有权利
露兜博客 中的代码可根据自身需要而进行必要的修改。
第二步：使用 LetterAvatar js 代码生成字母头像
完整代码可以在此查看并复制。
本文禁止住转载。任何形式转载请联系作者（时光在路上 ｗｗｗ．ｔｉｍｅｚｌｓ．ｃｏｍ）。时光在路上保留所有权利
注意，如果你也使用了延迟加载（懒加载）图片的 js 代码，一定要将下面这段代码在懒加载代码之前加载。
原 js 代码需要略微修改，参见下面代码中的注释内容：
- LetterAvatar.transform = function() {
- Array.prototype.forEach.call(d.querySelectorAll(".letteravatar[alt]"), //此处将原代码中的 img[alt] 变为 .letteravatar[alt]
- function(img, name, color) {
- name = img.getAttribute("alt");
- color = img.getAttribute("color");
- img.src = LetterAvatar(name, img.getAttribute("width"), color);
- img.removeAttribute("alt"); //此处将原代码的 avatar 变为 alt
- img.setAttribute("alt", name)
- })
- };
- if (typeof define === "function" && define.amd) {
- define(function() {
- return LetterAvatar
- })
- } else {
- if (typeof exports !== "undefined") {
- if (typeof module != "undefined" && module.exports) {
- exports = module.exports = LetterAvatar
- }
- exports.LetterAvatar = LetterAvatar
- } else {
- window.LetterAvatar = LetterAvatar;
- d.addEventListener("DOMContentLoaded",
- function(event) {
- LetterAvatar.transform()
- })
- }
- }
- })(window, document);
大功告成，试一下吧！
本文禁止全文转载。任何形式转载请联系作者（时光在路上 ｗｗｗ．ｔｉｍｅｚｌｓ．ｃｏｍ） Copyright © 2023. All Rights Reserved
