如何检查所有图像是否已加载？ （请不要jQuery）

Question

由于.onload中异步执行的性质，Javscript不会按照代码中出现的顺序运行。我从how to alert after all images loaded?学习的片段后面的片段总是不起作用，传递到这里并在那里失败，所有这些都取决于浏览器执行的顺序。有什么建议怎么解决？ （请不要jQuery，也不要问我原因）

var imgLoaded = 0;
var imgToLoad = 10;
var onImgLoad = function()
{
   imgLoaded++;
   if(imgLoaded == imgToLoad)
   {
      alert("done");             //Call to our draw function
   }
}

for(var i = 0; i < 10; i++)
{
  images[i] = new Image();
  images[i].onload = onImgLoad;
  images[i].src = 'images/'+i+'.png';
}    

具体来说，这是代码失败的地方：

   imgLoaded++;
   if(imgLoaded == imgToLoad) { }

因此，即使所有图像都已加载更正，有时IF条件中的代码也可能无法执行。

Answer 1

看到这个小提琴：http://jsfiddle.net/wdBbX/

var images = [];

function loadImages(callBack)
{
    var imgLoaded = 0;
    var imgToLoad = 10;

    var onImgLoad = function()
    {
          imgLoaded++;
          if(imgLoaded == imgToLoad)
          {
               callBack(imgLoaded);             //Call to our draw function
          }
    }

    for(var i = 0; i < 10; i++)
    {
          images[i] = new Image();
          images[i].onload = onImgLoad;
          images[i].src = 'images/'+i+'.png';
    } 
}

loadImages(function(i){
    alert(i); 
});

Answer 2

在这种情况下，我更喜欢顺序方式。

所以你可以用css ...

添加很酷的动画

var current=1,toload=10;
function next(){
 var img=document.createElement('img');
 img.onload=function(){
  current++;
  current==(toload+1)?(
   console.log('ALL IMAGES ARE LOADED');
   // callback
  ):(
   next()
  )
  document.body.appendChild(this);
 }
 img.src='img/'+current+'.jpg';
}
window.onload=next;

我还添加了添加图像数组的方法

var current=0,images=['img1.jpg','img2.jpg','img3.jpg','img4.jpg'];
function next(){
 var img=document.createElement('img');
 img.onload=function(){
  current++;
  current==images.length?(
   console.log('ALL IMAGES ARE LOADED');
   // callback
  ):(
   next()
  )
  document.body.appendChild(this);
 }
 img.src=images[current];
}
window.onload=next;

如果您对所有图像不感兴趣，还会添加img.onerror与onload esle具有相同功能的循环停止。

如果您不理解某些内容或者您需要它作为回调函数，请询问。

Answer 3

这是一个适当的最新解决方案，包括示例用法：

const preload = src => new Promise(function(resolve, reject) {
  const img = document.createElement('img');
  img.onload = function() {
    resolve(img);
  }
  img.onerror = reject;
  img.src = src;
});
const preloadAll = sources =>
  Promise.all(
    sources.map(
      preload));

const sources = [
  'https://i.picsum.photos/id/1000/5626/3635.jpg',
  'https://i.picsum.photos/id/10/2500/1667.jpg',
  'https://homepages.cae.wisc.edu/~ece533/images/cat.png',
  'https://homepages.cae.wisc.edu/~ece533/images/airplane.png'
];

preloadAll(sources)
  .then(images => console.log('Preloaded all', images))
  .catch(err => console.error('Failed', err));

来自here。