WordPress 评论头像优化

Gravatar 头像在国内会被“屏蔽”，除了网上切换图片地址的方法，我还借鉴了一种加载失败的展示效果。

加载失败的效果

代码语言：javascript复制

get_avatar(
  $comment->comment_author_email,
  $avatar_size,
  '', 
  '评论人：' . get_comment_author($comment->comment_ID), 
  ['extra_attr' => 'onerror="this.classList.add('error')" loading="lazy"']
)

在 get_avatar函数的第四个参数里给 img 标签加上 onerror 事件，在图片加载失败的时候添加上 error 的类名。

代码语言：javascript复制

img.error {
  display: inline-block;
  transform: scale(1);
  content: '';
  color: transparent;
}
img.error::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background: #f5f5f5 url("data:image/svg xml,") no-repeat center / 70% 70%;
}
img.error::after {
  content: '加载失效';//attr(alt);
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  line-height: 2;
  background-color: rgba(0,0,0,.5);
  color: white;
  font-size: 12px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

error 函数 事件

0 人点赞