Загружайте изображения одно за другим в JavaScript

Question

Моя проблема в том, что у меня есть несколько изображений, и я хочу загрузить их как предварительный загрузчик, но проблема в том, что я хочу начать загрузку второго изображения после завершения первого.В моем текущем коде я сохраняю все изображения в одном массиве и с помощью цикла загружаю все изображения (передаю источник всех изображений массива в объект изображения), а затем все изображения начинают загружаться.

Answer 1

Вы хотите посмотреть на событие загрузки.

function loadImagesInSequence(images) {
  if (!images.length) {
    return;
  }

  var img = new Image(),
      url = images.shift();

  img.onload = function(){ loadImagesInSequence(images) };
  img.src = url;
}

loadImagesInSequence(['a.png', 'b.png', 'c.png']);

всякий раз, когда изображение загружается, происходит событие загрузки. Когда это происходит, мы снова выполняем loadImagesInSequence (). Мы не будем загружать одно и то же изображение дважды, поскольку Array.shift() удалено из массива, через который мы просто прошли.