如何将HTML img标签的onerror图片降级功能实现在独立JS文件中

操作步骤 #

1. 修改原有HTML代码 #

移除img标签的内联onerror属性，可按需添加自定义标记方便JS识别，示例：

<!-- 方案A：指定单独降级地址，灵活度最高 -->
<img src="images/business-card.webp" class="m-auto img-fluid webp-fallback" data-fallback="images/business-card.jpg">

<!-- 方案B：不指定降级地址，适合同路径下同名jpg的统一规则场景 -->
<img src="images/business-card.webp" class="m-auto img-fluid webp-fallback">

2. 编写独立JS文件 #

新建单独的JS文件（可命名为webp-fallback.js），根据你的场景选择对应代码：

普通静态页面场景

document.addEventListener('DOMContentLoaded', function() {
  // 选中所有标记了webp-fallback类的图片
  const webpImgs = document.querySelectorAll('img.webp-fallback');
  
  webpImgs.forEach(img => {
    img.addEventListener('error', function handleLoadError() {
      // 先移除事件监听，避免降级图片加载失败时触发死循环
      this.removeEventListener('error', handleLoadError);
      // 优先取自定义的降级地址
      if (this.dataset.fallback) {
        this.src = this.dataset.fallback;
        return;
      }
      // 没有自定义地址则自动替换后缀为jpg
      this.src = this.src.replace(/\.webp$/i, '.jpg');
    });
  });
});

存在动态加载图片的场景

用事件委托实现，动态插入的图片无需重复绑定事件：

// 捕获阶段监听全局error事件（error事件不支持冒泡）
document.addEventListener('error', function(e) {
  const target = e.target;
  // 仅处理未尝试过失效、且需要降级的webp图片
  if (target.tagName === 'IMG' && target.classList.contains('webp-fallback') && !target.dataset.hasFallback) {
    target.dataset.hasFallback = '1';
    if (target.dataset.fallback) {
      target.src = target.dataset.fallback;
    } else {
      target.src = target.src.replace(/\.webp$/i, '.jpg');
    }
  }
}, true);

3. 引入JS文件 #

在HTML的</body>闭合标签前引入编写好的JS文件即可：

<script src="你的JS文件存放路径/webp-fallback.js"></script>
<!-- 如需放在head标签内引入，可添加defer属性保证DOM加载完成后执行 -->
<!-- <script src="你的JS文件存放路径/webp-fallback.js" defer></script> -->

内容的提问来源于stack exchange，提问作者spaceWalker