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

Question

我正在使用从 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);
        }
    }
}

Answer 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
}

<div id='content-info-and-screenshot-container'></div>

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

How to know whether all images are downloaded by the browser?

html

javascript

browser

dom

dom-events