Как сделать так, чтобы изображения загружались последовательно

Question

Здесь у меня есть простой тестовый код, который загружает проверку изображений в браузере. Здесь я использовал асинхронное событие onload для добавления изображения в dom после его завершения загрузки. Изображения загружаются просто отлично. Проблема заключается в том, что я постоянно перезагружаю страницу с изменением последовательности нескольких изображений времени.. Если изображение-2 загружено перед изображением-1, то сначала загружается изображение-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'; 
}); 

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

Answer 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