利用 onerror 事件使 Gravatar 在源不可用时自动切换头像源

尚寂新
2024/07/07 22:00

前些天,有小伙伴反映说,站点的头像变成碎图了...今天找了下时间,解决了这个问题。

本方案的原理,就是使用了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 能用之外,其他平台也都是可以用的。希望本方案可以给大家带来参考。

已有 1 条评论 (旧评论在前)
  1. 刘郎
    回复
    2024-07-08 06:31 贵州省 macOS

    这个方法也不错 如果同时运行的js太多 或者发生冲突时 我可以试试我这个"IMG加载默认图备用方案" 简单 实用 适应性强

添加新评论 (Markdown Supported)
(ノ°ο°)ノ