如何确保图像按顺序加载答案

【问题标题】：how to make sure images load sequentially如何确保图像按顺序加载
【发布时间】：2018-08-10 01:19:15
【问题描述】：

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

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

【问题讨论】：

使用承诺developer.mozilla.org/nl/docs/Web/JavaScript/Reference/…
但是 foreach 是一种同步方法。它应该阻止所有内容，直到第一个图像加载，不是吗？
@AL-zami onload是一个异步事件，所以forEach的回调不等待图片下载，它只是开始下载然后继续
您无法控制图像完成加载的顺序。我认为你有两个选择。选项 1 - 在加载每个图像时设置一个标志，您可以在所有图像都加载时显示图像，或者在序列中的下一个图像可用时立即显示它。选项 2 - 等到第一个加载完成后再请求第二个，依此类推（但这当然会很慢）。
使用 Promise 能解决这类问题吗？李@Roberrrt 说？

标签： javascript asynchronous onload

【解决方案1】：

您应该等待来自onload 事件的回调。如果它被触发，您可以迭代并加载下一张图片。这可以确保图像以正确的顺序加载（如 array）。

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

【讨论】：

但是如果一个图像无法加载会发生什么......这意味着其他图像也无法加载

【解决方案2】：

这是另一种方法。它在一个循环中触发所有图像请求，然后当收到响应时，它会进行一些处理以确定可以显示哪些图像。这样，您不必等待一张图像完成加载，然后再请求下一张。代码可能与整理有关，但您明白了...

    var urls = ["/Content/images/Chrysanthemum.jpg", "/Content/images/Desert.jpg", "/Content/images/Hydwewrangeas.jpg", "/Content/images/Jellyfish.jpg", "/Content/images/Koala.jpg"]
    var numImages = urls.length;
    var images = [numImages];
    var gotResponse = [numImages];
    var maxDisplayed = -1;

    function checkImages(index) {
        // Check if previous images have been displayed
        if (maxDisplayed == index - 1) {
            for (i = index; i <= numImages; i++) {
                // Check if we've received a response for this image
                if (gotResponse[i] !== true) {
                    break;
                }
                maxDisplayed = i;
                if (images[i] != null) {
                    console.log('Adding image ' + i);
                    document.body.appendChild(images[i]);
                }
            }
        }
    }

    function imageError(index) {
        console.log('Error loading image ' + index);
        images[index] = null;
        gotResponse[index] = true;
        checkImages(index);
    }

    function imageLoaded(index, image) {
        console.log('Loaded image ' + index);
        images[index] = image;
        gotResponse[index] = true;
        checkImages(index);
    }

    function loadImages() {
        $.each(urls, function(index, value) {
            var image = new Image();
            image.onload = function () {
                imageLoaded(index, image);
            }
            image.onerror = function () {
                imageError(index);
            }
            image.src = value;
            image.style.width = '300px';
            image.style.height = '300px';
        });
    }

    loadImages();

样本输出：

Error loading image 2
Loaded image 3
Loaded image 0
Adding image 0
Loaded image 1
Adding image 1
Adding image 3
Loaded image 4
Adding image 4

【讨论】：