如何检查是否加载了所有图像?(请不要使用jQuery）

how to check if all images loaded? (no jQuery please)

本文关键字：jQuery 图像 检查 何检查 是否 加载      更新时间：2023-09-26

由于 .onload 中异步执行的性质，Javscript 不会按照代码中显示的顺序运行。以下片段，因为我从如何在加载所有图像后发出警报？不会总是工作，在这里通过，在那里失败，这一切都取决于浏览器执行的顺序。有什么建议如何解决吗？（请不要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条件中的代码也可能无法执行。

看到这个小提琴： 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); 
});
在这种情况下，

我更喜欢顺序方式。

因此，您可以使用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;

我还添加了 Addan 图像数组的方式

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;

如果您不对所有图像进行舒尔，则还会添加一个与onload功能相同的img.onerror，否则循环将停止。

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

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

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

从这里。

相关文章：