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

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（否则为false）解析承诺。

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

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

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];