如何在页面加载完成后判断元素background-image是否成功加载？

问题描述 #

已有多个相关问题提及，可以通过给元素添加onload事件处理函数，在元素的background-image加载完成时执行对应代码。
但如果运行的是类似Puppeteer脚本这类在页面完全加载后才执行校验的程序，此时已经无法再添加onload事件处理函数。
是否存在不使用onload、可在页面加载完成后“事后”校验元素background-image是否加载成功的方法？
目前能想到的唯一方案是提取元素的background-image样式地址，再自行fetch该图片判断是否能正常加载，但这种方案效率远低于直接从浏览器侧获取图片加载状态，尤其是需要校验大量background-image的场景下性能差距会更明显。 #

可行方案 #

两种方案均不会额外发起网络请求，性能和直接读取浏览器原生状态一致，可满足批量校验需求。

方案1：Performance API查询（性能最优）

浏览器会将所有已发起的资源请求的状态记录在Performance API中，无需额外操作即可直接读取结果，是批量校验的最优选择。
操作步骤：

1. 提取目标元素的background-image属性值，去除url()包裹的括号、引号，转换为绝对路径
2. 调用performance.getEntriesByName(图片绝对路径)获取资源加载条目：
   • 若返回空数组，说明该图片从未发起过加载请求，属于加载失败
   • 若返回有效条目，检查responseStatus属性，值在200~299区间即为加载成功，否则失败

注意：跨域图片需要响应头携带Timing-Allow-Origin才可读取到responseStatus值，跨域场景下可使用方案2。
示例代码：

function checkBgImgByPerformance(el) {
  // 提取background-image的URL
  const bgImgUrl = window.getComputedStyle(el).backgroundImage.match(/url\(["']?([^"']*)["']?\)/)?.[1];
  if (!bgImgUrl) return false;
  // 转成绝对路径
  const absoluteUrl = new URL(bgImgUrl, window.location.origin).href;
  // 查询performance条目
  const entries = performance.getEntriesByName(absoluteUrl);
  if (entries.length === 0) return false;
  const [entry] = entries;
  return entry.responseStatus >= 200 && entry.responseStatus < 300;
}

方案2：临时Image对象校验（兼容性最好）

利用浏览器的资源缓存机制，给临时Image对象赋值相同的src时不会重复发起网络请求，直接读取缓存的资源状态即可，兼容性比Performance API更好。
操作步骤：

1. 同上提取background-image的绝对路径URL
2. 创建临时Image对象，赋值src后直接读取complete和naturalWidth属性判断加载状态
   示例代码：

function checkBgImgByImage(el) {
  const bgImgUrl = window.getComputedStyle(el).backgroundImage.match(/url\(["']?([^"']*)["']?\)/)?.[1];
  if (!bgImgUrl) return false;
  const absoluteUrl = new URL(bgImgUrl, window.location.origin).href;
  const img = new Image();
  img.src = absoluteUrl;
  // 缓存命中时complete会立刻为true，naturalWidth大于0说明图片加载有效
  return img.complete && img.naturalWidth > 0;
}

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