javascript - 检查页面中的所有图像是否已加载

Question

目标:检查页面中的所有图像是否已加载。如果是，则调用一个函数，如果不是，再次检查是否所有图像都已加载。

我的尝试:

let checkImages = new Promise(resolve => { resolve(areCompleted()); });

function areCompleted() {
  let images = document.querySelectorAll('img');
  images = Array.from(images);

  for (let i = 0; i < images.length; i++) {
    if (!images[i].complete) {
      return false;
    }
  }
  return true;
}

如果所有图像都已完成，它会用 true 来解析 promise，如果没有，则为 false。

checkImages.then(completed => {
  if (completed) {
    completedFunction();
  } else {
    // Check again
  }
});

如果响应为真，则调用函数，否则...我不知道如何再次进行相同的检查，但我想进行检查直到响应为真.

Answer 1

此函数将检查已加载的图像并将事件监听器附加到所有其他图像，以便它可以判断给定容器中的每个图像何时加载...

function onImagesLoaded(container, event) {
    var images = container.getElementsByTagName("img");
    var loaded = images.length;
    for (var i = 0; i < images.length; i++) {
        if (images[i].complete) {
            loaded--;
        }
        else {
            images[i].addEventListener("load", function() {
                loaded--;
                if (loaded == 0) {
                    event();
                }
            });
        }
        if (loaded == 0) {
            event();
        }
    }
}

var container = document.getElementById("container");

onImagesLoaded(container, function() {
    alert("All the images have loaded");
});

<div id="container">
  <img src="https://cdn.vox-cdn.com/thumbor/C1SdoDActSv8tPONx_OjwEobUjw=/0x0:1004x753/1200x800/filters:focal(0x0:1004x753)/cdn.vox-cdn.com/uploads/chorus_image/image/49523369/20150428-cloud-computing.0.jpg" />
  <img src="https://images.techhive.com/images/article/2016/08/clouds-100678070-primary.idge.jpg" />
  <img src="https://www.quali.com/wp-content/uploads/2016/04/101-HEADER-IMAGE.jpg" />
  <img src="https://cdn.computerworlduk.com/cmsdata/features/3641280/cloud_istock_malerapaso_thumb800.jpg" />
</div>

如果所有图像都已加载、由于缓存或容器中没有图像，这仍然有效。

如果您想检查页面中的所有图像，只需将容器选择器改为正文...

var container = document.getElementsByTagName("body")[0];