如何用JavaScript检测指定文件加载完成并触发操作（无法修改原页面）

针对你需要等待特定文件（如sunny.png）加载完成后弹出提示，且无法修改原页面的需求，推荐以下两种可行方案：

方案一：用PerformanceObserver监控资源加载（推荐） #

这个方法可以捕获所有类型的资源加载（包括DOM中的图片、CSS背景图、脚本等），不受资源是否在DOM中的限制：

// 目标文件名
const targetFile = 'sunny.png';

// 创建性能观察者，监听资源加载事件
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    // 检查当前加载完成的资源是否匹配目标文件
    // 可根据实际路径调整判断逻辑，比如用endsWith确保是文件名结尾
    if (entry.name.includes(targetFile)) {
      alert(`${targetFile} 已加载完成！`);
      // 匹配到后断开观察者，避免重复触发
      observer.disconnect();
    }
  });
});

// 启动观察者，监听所有资源加载条目
observer.observe({ entryTypes: ['resource'] });

方案二：用MutationObserver监听DOM中的图片元素 #

如果目标文件是页面中通过<img>标签加载的图片，可以通过监听DOM变化来找到目标图片并等待其加载：

const targetFile = 'sunny.png';

// 创建DOM变化观察者
const domObserver = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    // 遍历新增的DOM节点
    mutation.addedNodes.forEach((node) => {
      if (node.tagName === 'IMG' && node.src.includes(targetFile)) {
        // 监听图片加载完成事件
        node.onload = () => {
          alert(`${targetFile} 已加载完成！`);
          domObserver.disconnect();
        };
        // 处理图片已经加载完成的情况（比如缓存中的图片）
        if (node.complete) {
          alert(`${targetFile} 已加载完成！`);
          domObserver.disconnect();
        }
      }
    });
  });
});

// 启动观察者，监听整个文档的节点新增
domObserver.observe(document.documentElement, { childList: true, subtree: true });

补充说明 #

你提到的DOMContentLoaded、document.readyState触发过早是因为它们仅等待DOM结构解析完成，不等待资源加载；window.onload未触发则大概率是页面存在加载失败或一直处于挂起状态的资源，导致全局加载事件无法完成，因此单独监控目标资源是更可靠的方式。

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