如何知道浏览器是否下载了所有图片？答案

【问题标题】：How to know whether all images are downloaded by the browser?如何知道浏览器是否下载了所有图片？
【发布时间】：2021-05-16 00:47:02
【问题描述】：

我正在使用从 URL 下载的背景图像动态构建 div。浏览器在内部下载并缓存图像。下载完所有图片后如何收到通知？

function preloadContentScreenshots() {
    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];
            var _div = document.createElement("div");
            _div.id = "content-screenshot-" + _item.id;
            _div.classList.add("cs");
            _div.classList.add("hidden");
            _div.style.backgroundImage = "url('" + _item.screenshots["1152x648"] + "')";
            document.getElementById("content-info-and-screenshot-container").appendChild(_div);
        }
    }
}

【问题讨论】：

你可以使用service worker。

标签： javascript html dom browser dom-events

【解决方案1】：

类似的东西。为了演示，我制作了一组图像进行测试，因此我注释掉了您的部分代码。不过你明白了

let content = [
  "https://images.unsplash.com/photo-1558211583-d26f610c1eb1?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjY4NDE2fQ",
  "https://images.unsplash.com/photo-1558459654-c430be5b0a44?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjY4NDE2fQ",
  "https://images.unsplash.com/photo-1558834643-1dacaf774843?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjY4NDE2fQ"
]

let loadedImgs = 0;

function preloadContentScreenshots() {
  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];
    var _div = document.createElement("div");
    // _div.id = "content-screenshot-" + _item.id;
    _div.classList.add("cs");
    _div.classList.add("hidden");
    loadImage(_row, _div)

    document.getElementById("content-info-and-screenshot-container").appendChild(_div);
    //  }
  }
}

function loadImage(imageUrl, _div) {
  var bgImg = new Image();
  bgImg.onload = () => {
    _div.style.backgroundImage = "url('" + bgImg.src + "')";
    if (++loadedImgs >= content.length) {
      // all images are loaded
      console.log("all images loaded")
    }
  };
  // bgImg.src = _item.screenshots["1152x648"];
  bgImg.src = imageUrl;

}

preloadContentScreenshots()

.cs {
  padding: 50px;
  border: 1px solid #ccc
}

&lt;div id='content-info-and-screenshot-container'&gt;&lt;/div&gt;

【讨论】：

谢谢@Kinglish，您的回答对我找到解决方案帮助很大。我必须使用闭包来使其正常工作，因为我必须使用 for 循环。我将您的答案标记为已接受的答案。