利用 onerror 事件使 Gravatar 在源不可用时自动切换头像源
前些天,有小伙伴反映说,站点的头像变成碎图了...今天找了下时间,解决了这个问题。
本方案的原理,就是使用了onerror
事件的调用,来检测头像加载过程中是否出错,如果出错,就执行 Javascript 逻辑。目前整理好的代码如下所示。
const avatarOnError = (node) => {
// nowURL:(例)https://cravatar.cn/avatar/8229a0ed4a6cbc6f3d618f76f8d028a3
const nowURL = node.src;
// 如果默认的 cravatar 无法访问了,就使用 weavatar 作为备份
if (nowURL.split('/')[2] == 'cravatar.cn') {
node.src = 'https://weavatar.com/avatar/' + nowURL.split('/')[4];
// 如果第一备选 weavatar 也无法访问了,就使用 loli 源作为备份
} else if (nowURL.split('/')[2] == 'weavatar.com') {
node.src = 'https://gravatar.loli.net/avatar/' + nowURL.split('/')[4];
// 如果第二备选 loli 源也无法访问了,就使用官方源作为备份
} else if (nowURL.split('/')[2] == 'gravatar.loli.net') {
node.src = 'https://secure.gravatar.com/avatar/' + nowURL.split('/')[4];
// 都不行了,加载个碎图占位图
} else {
node.src = '这里一定要写一个能百分之百能正常加载的图片的路径(最好是本站目录下的),防止进入死循环';
}
}
调用的时候,直接写在img
标签上就行,例子如下。
<img src="..." ... onerror="avatarOnError(this);">
因为就只是前端的东西嘛,除了 Typecho 能用之外,其他平台也都是可以用的。希望本方案可以给大家带来参考。
这个方法也不错 如果同时运行的js太多 或者发生冲突时 我可以试试我这个"IMG加载默认图备用方案" 简单 实用 适应性强