Как использовать загрузку изображения в цикле?

Question

1. Я хочу добавить новое изображение () по порядку.
   Например,

    netherlands_001.jpg,
    netherlands_002.jpg,
    netherlands_003.jpg,
    :
    :

Когда я не использую Onload, изображения добавляются по порядку.
Но когда я использую Onload, iamges добавляются не по порядку.

Ниже приведен лог-файл concole, в котором видно, что добавление изображения было не в порядке.

    /C:/Users/TSUBYAM/Desktop/Web/images/netherlands/netherlands_008.jpg:1 GET file:///C:/Users/TSUBYAM/Desktop/Web/images/netherlands/netherlands_008.jpg net::ERR_FILE_NOT_FOUND
    Image (async) (anonymous) @ load_picture.js:19
    load_picture.js:17 Not Found: ../images/netherlands/netherlands_008.jpg
    load_picture.js:13 Found: ../images/netherlands/netherlands_006.jpg
    load_picture.js:13 Found: ../images/netherlands/netherlands_001.jpg
    load_picture.js:13 Found: ../images/netherlands/netherlands_003.jpg
    load_picture.js:13 Found: ../images/netherlands/netherlands_005.jpg
    load_picture.js:13 Found: ../images/netherlands/netherlands_004.jpg
    load_picture.js:13 Found: ../images/netherlands/netherlands_002.jpg
    load_picture.js:13 Found: ../images/netherlands/netherlands_007.jpg

Я также хочу выйти из цикла, когда найден путь к изображению, который не существует.

    netherlands_001.jpg,
    netherlands_002.jpg,
    netherlands_003.jpg,
    netherlands_004.jpg, # If not exist, I want to exit the loop here. 
    netherlands_005.jpg, # Then I don't need to load this image.
    :
    :

Я не могу выйти из цикла, поэтому вместо этого я использую 'style.display = none`,Поэтому я не отображаю изображения, которых не существует.

Это мой код.

    let file_name = window.location.href.split('/').pop();
    let country = file_name.split(/\./)[0];
    let parent_img = document.getElementsByClassName("pic")[0];

    for ( var i = 0; i < 8; i++)
    {
        // get file image
        let pic_num  = ("000" + (i + 1)).slice(-3);
        let pic_name = `${country}_${pic_num}.jpg`;
        let pic_path = "../images/" + country + "/" + pic_name;

        let newImage = new Image();

        newImage.onload = function(){
            console.log(`Found: ${pic_path}`);
        }
        newImage.onerror = function(){
            this.style.display = 'none';
            console.log(`Not Found: ${pic_path}`);
        }
        newImage.src = pic_path;
        newImage.alt = pic_name;
        parent_img.appendChild(newImage);
    }

Answer 1

Если вы поместите цикл в функцию async, вы можете await каждый onload (или onerror) преобразовать в Promise:

(async () => {
  const file_name = window.location.href.split('/').pop();
  const country = file_name.split(/\./)[0];
  const parent_img = document.querySelector(".pic");

  for (let i = 0; i < 8; i++) {
    // get file image
    const pic_num = ("000" + (i + 1)).slice(-3);
    const pic_name = `${country}_${pic_num}.jpg`;
    const pic_path = "../images/" + country + "/" + pic_name;

    const newImage = new Image();
    try {
      newImage.src = pic_path;
      newImage.alt = pic_name;
      await new Promise((resolve, reject) => {
        newImage.onload = function() {
          console.log(`Found: ${pic_path}`);
          resolve();
        }
        newImage.onerror = function() {
          console.log(`Not Found: ${pic_path}`);
          reject();
        }
      });
    } catch(e) {
      // reject was called, break out of the loop:
      break;
    }
    parent_img.appendChild(newImage);
  }
})();

Другой метод будетзапросить все изображения параллельно с помощью Promise.all, значительно увеличив скорость загрузки, но добавить их только в случае успеха:

(async () => {
  const file_name = window.location.href.split('/').pop();
  const country = file_name.split(/\./)[0];
  const parent_img = document.querySelector(".pic");
  Promise.all(Array.from(
    { length: 8 },
    (_, i) => {
      const pic_num = ("000" + (i + 1)).slice(-3);
      const pic_name = `${country}_${pic_num}.jpg`;
      const pic_path = "../images/" + country + "/" + pic_name;
      const newImage = new Image();
      newImage.src = pic_path;
      newImage.alt = pic_name;
      return new Promise((resolve, reject) => {
        newImage.onload = function() {
          console.log(`Found: ${pic_path}`);
          resolve(newImage);
        }
        newImage.onerror = function() {
          console.log(`Not Found: ${pic_path}`);
          reject();
        }
      });
    }
  ))
  .then((images) => {
    images.forEach((image) => {
      parent_img.appendChild(image);
    });
  });
})();