Javascript 如何在循环中使用图像加载？ 我想按顺序追加新图像。 比如说, 我还想在找到不存在的映像路径时退出循环 荷兰_001.jpg， 荷兰_002.jpg， 荷兰_003.jpg， 如果不存在，我想退出这里的循环。 荷兰_005.jpg，#那么我不需要加载此图像。 : :

我无法退出循环，因此使用“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);
    }

let file_name=window.location.href.split（'/'）.pop（）；
让country=file\u name.split（/\./）[0]；
让parent_img=document.getElementsByClassName（“pic”）[0]；
对于（变量i=0；i<8；i++）
{
//获取文件映像
设pic_num=（“000”+（i+1））.slice（-3）；
让picu name=`${country}{pic_num}.jpg`；
让pic_path=“../images/”+国家+“/”+pic_名称；
设newImage=newImage（）；
newImage.onload=函数（）{
log（`Found:${picu path}`）；
}
newImage.onerror=函数（）{
this.style.display='none'；
log（`notfound:${picu path}`）；
}
newImage.src=pic_路径；
newImage.alt=pic\u name；
父项\u img.appendChild（newImage）；
}

如果将循环放入

异步

功能，则可以

等待

将每个

加载

（或

一个错误

）转换为

承诺

：

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

---

如果将循环放入

异步

函数中，则可以

等待

将每个

加载

（或

onerror

）转换为

承诺

：

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

---

非常感谢。这正是我想要做的。我也意识到需要学习更多关于异步的知识。谢谢。这正是我想要做的。我还意识到需要更多地学习异步。

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

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

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