javascript - 如何确保图像按顺序加载

Question

这里我有一个简单的测试代码，它在浏览器中加载图像测试。这里我使用异步 onload 事件在完成加载后将图像添加到 dom。图片加载得很好。问题是如果我连续重新加载页面多次图像序列更改。就好像 image-2 在 image-1 之前加载，有时 image-3 先加载，等等。我怎么能确保图像按顺序加载，例如每次加载页面时先加载图像 1，然后加载图像 2、图像 3 等。我该怎么做？

var images = ['cat1.png','cat2.jpg','cat3.jpg'];

var i = 0;
images.forEach(function(elem,index,arr){
   var image=new Image();
   image.onload = function(){
       document.body.appendChild(image);
       console.log(++i);
   };
   image.onerror = function(){
       console.log('error occured');

   } 
   image.src = elem;
   image.style.width = '300px';
   image.style.height = '300px';
});

Answer 1

您应该等待 onload 事件的回调。如果它被触发，您可以迭代并加载下一张图片。这确保图像将以正确的顺序加载(如在数组中)。

var images = [
    'http://d39kbiy71leyho.cloudfront.net/wp-content/uploads/2016/05/09170020/cats-politics-TN.jpg',
    'error',
    'https://s2.graphiq.com/sites/default/files/stories/t2/tiny_cat_12573_8950.jpg',
    'http://www.bharatint.com/img/categories/our-cat-shop-image.png'
], i = 0;

function loadImageArrayAsync(){
    var image = new Image();
    image.onload = function(){
        document.body.appendChild(image);
        if (i++ < images.length - 1) loadImageArrayAsync();
    };
    image.onerror = function(){
        if (i++ < images.length - 1) loadImageArrayAsync();
     }
    image.src = images[i];
    image.style.height = '300px';
    image.style.width = '300px';
}

loadImageArrayAsync();