2

由于 .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 条件中的代码也可能无法执行。

4

3 回答 3

0

看到这个小提琴：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); 
});
于 2013-09-10T16:04:12.713 回答
0

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

所以你可以用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 具有相同功能的循环停止。

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

于 2013-09-10T16:27:52.337 回答
0

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

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

从这里。

于 2020-04-29T17:48:30.010 回答