JavaScript 全局处理所有 img 加载错误

最新推荐文章于 2025-11-13 10:59:24 发布

原创最新推荐文章于 2025-11-13 10:59:24 发布 · 893 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

文章介绍了如何使用JavaScript在全局范围内处理img标签的加载错误，通过添加自定义的错误样式并在加载3次失败后显示base64格式的占位图片。

JavaScript 全局处理所有 img 加载错误，显示占位 base64 图片

(function () {
  // 图片加载失败显示的base64图片
  const base64 = "data:image/png;base64,xxxxxx";
  // 图片加载错误处理样式名称
  const errorClassName = "img-load-error";

  // img 加载失败，添加错误处理样式 errorClassName
  document.addEventListener(
    "error",
    (e) => {
      let target = e.target;
      const tagName = target.tagName || "";
      const curTimes = Number(target.dataset.retryTimes) || 0;
      if (tagName.toLowerCase() === "img") {
      	// 加载失败3次后，添加错误处理样式
        if (curTimes >= 3) {
          target.classList.remove(errorClassName);
          target.classList.add(errorClassName);
        } else {
          target.dataset.retryTimes = curTimes + 1;
          target.src = target.src;
        }
      }
      target = null;
    },
    true
  );

  // 图片加载错误处理style
  function errorStyle() {
    const style = document.createElement("style");
    document.head.appendChild(style);
    style.innerHTML = `
        img.${errorClassName} {
            display: inline-block;
            transform: scale(1);
            content: "";
            color: transparent;
        }
        img.${errorClassName}::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: #f5f5f5 url(${base64}) no-repeat center / 50% 50%;
        }
    `;
  }

  // 注入图片错误处理样式
  window.addEventListener("load", errorStyle, { once: true });
})();