如何检测浏览器是否完成所有背景图片下载并获得加载完成通知

CSS背景图没有原生的加载完成监听事件，我们可以通过主动创建Image对象预加载资源的方式，统计所有图片的加载状态，在全部加载完成后触发通知。

修改后实现代码 #

function preloadContentScreenshots() {
  const loadPromises = [];
  const container = document.getElementById("content-info-and-screenshot-container");

  // 遍历所有资源创建图片加载任务
  for (var i = 0; i < content.length; i++) {
    var _row = content[i];
    for (var k = 0; k < _row.items.length; k++) {
      var _item = _row.items[k];
      const imgUrl = _item.screenshots["1152x648"];
      
      const loadPromise = new Promise((resolve, reject) => {
        const tempImg = new Image();
        tempImg.src = imgUrl;
        tempImg.onload = () => resolve({
          id: _item.id,
          url: imgUrl
        });
        tempImg.onerror = () => reject(`图片加载失败: ${imgUrl}`);
      });
      loadPromises.push(loadPromise);
    }
  }

  // 监听所有图片加载完成事件
  Promise.all(loadPromises)
    .then((loadedItems) => {
      // 所有图片加载成功后批量创建带背景图的div
      loadedItems.forEach(item => {
        const _div = document.createElement("div");
        _div.id = "content-screenshot-" + item.id;
        _div.classList.add("cs", "hidden");
        _div.style.backgroundImage = `url('${item.url}')`;
        container.appendChild(_div);
      });
      // 此处为所有图片加载完成后的通知位置，可执行你的后续逻辑
      console.log("全部背景图片加载完成");
    })
    .catch(error => {
      // 单张图片加载失败会进入此分支
      console.error(error);
    });
}

可选兼容方案 #

如果需要即使部分图片加载失败，也要收到全部任务完成的通知，可以把Promise.all替换为Promise.allSettled，再自行过滤加载成功和失败的结果即可。

注意事项 #

• 提前用Image对象加载的资源会和CSS背景图共用浏览器缓存，不会产生重复下载，不会额外消耗带宽
• 浏览器对同域名并发请求数有限制，图片数量过多时会自动排队加载，属于正常浏览器机制

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