如何在图片完全加载前通过JavaScript处理<img>标签？

我之前也帮人处理过类似的谷歌图片替换需求，你遇到的这个「原图片闪一下才被替换」的问题其实挺典型的——核心就是document_end的时机还是晚了一步：谷歌图片的内容大多是动态渲染的，当你的脚本运行时，部分img标签已经被插入DOM，甚至原图片的请求已经发出去了，所以才会出现短暂的原图片显示。下面给你几个可行的解决方案，从易到难：

方案1：提前脚本运行时机 + MutationObserver监听 #

把content script的run_at改成document_start，让脚本在DOM开始构建时就启动，再用MutationObserver监听img元素的插入，在它还没来得及加载原图片时就替换掉src。

具体步骤： #

1. 修改manifest.json的content script配置：

"content_scripts": [
  {
    "matches": ["https://www.google.com/search?tbm=isch*"],
    "js": ["content.js"],
    "run_at": "document_start"
  }
]

2. 在content.js中编写监听逻辑：

// 等待DOM初始化后启动监听
document.addEventListener('DOMContentLoaded', () => {
  // 目标容器：谷歌图片结果的核心容器通常是div#islrg，找不到就监听整个body
  const target = document.querySelector('#islrg') || document.body;
  
  const observer = new MutationObserver((mutations) => {
    mutations.forEach(mutation => {
      // 遍历所有新增的节点
      mutation.addedNodes.forEach(node => {
        // 直接处理单个img标签
        if (node.tagName === 'IMG') {
          // 先清空原src避免请求，再替换成你的图片
          node.src = '';
          node.src = '你的替换图片URL';
          // 如果存在srcset格式，也要同步替换
          if (node.srcset) {
            node.srcset = '你的替换图片URL 1x, 你的高清替换图URL 2x';
          }
        }
        // 处理包含img的容器，递归查找内部的img
        else if (node.querySelectorAll) {
          node.querySelectorAll('img').forEach(img => {
            img.src = '';
            img.src = '你的替换图片URL';
            if (img.srcset) img.srcset = '你的替换图片URL';
          });
        }
      });
    });
  });

  // 配置监听规则：监听子节点添加、属性变化（比如动态设置src）
  observer.observe(target, {
    childList: true,
    subtree: true,
    attributes: true,
    attributeFilter: ['src', 'srcset']
  });
});

这个方案不需要额外权限，只需要调整脚本运行时机，就能在img刚被插入DOM时完成替换，大概率能避免闪图。

方案2：用webRequest API拦截图片请求（最彻底） #

如果方案1还是有漏网的情况（比如部分图片请求在脚本运行前就已发出），可以用Chrome的webRequest API从请求层面拦截，直接把原图片的请求重定向到你的替换图，这样浏览器根本不会加载原图片。

具体步骤： #

1. 在manifest.json中添加必要权限：

"permissions": [
  "webRequest",
  "webRequestBlocking",
  "https://www.google.com/search?tbm=isch*",
  "https://*.googleusercontent.com/*" // 谷歌图片的实际资源存储域名
],
"background": {
  "service_worker": "background.js"
}

2. 在background.js中编写拦截逻辑：

chrome.webRequest.onBeforeRequest.addListener(
  (details) => {
    // 匹配谷歌图片的资源URL，可根据实际情况调整正则
    if (/^https:\/\/.*\.googleusercontent\.com\/.*$/.test(details.url)) {
      // 重定向到你的替换图片
      return { redirectUrl: '你的替换图片URL' };
    }
  },
  { urls: ["https://*.googleusercontent.com/*"] },
  ["blocking"]
);

这个方案从请求根源上拦截，完全不会加载原图片，效果最彻底，但需要申请额外权限，且要确保匹配到正确的图片资源域名。

额外优化：临时隐藏未替换的图片 #

可以在脚本开头插入全局样式，先隐藏所有img，等替换完成后再显示，避免极个别情况出现的空白或闪图：

// 在document_start阶段插入样式，临时隐藏所有img
const hideStyle = document.createElement('style');
hideStyle.textContent = `
  img {
    visibility: hidden !important;
  }
`;
document.head.appendChild(hideStyle);

// 替换图片后，恢复显示
// 比如在MutationObserver的处理逻辑中添加：
img.style.visibility = 'visible';

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