javascript - 循环加载图像，一张一张，只有在上一张已经完全加载之后

Question

正如标题所示，我有一个我想要加载的图像列表。我有一个函数，它给出一个从 1 到 1000（大约）的数值，将我的 html 文档中图像对象的源更改为所需的图像名称。这个数值保存在一个全局变量中，它有时可能会改变，然后，通过调用该函数，实际的图像 src 也会改变。

例如：

if ( myImage == 1)
    document.getElementById("mainImage").src = "snow.bmp";
else if ( myImage == 2)
    document.getElementById("mainImage").src = "desert.bmp";
else if ( myImage == 3)
    document.getElementById("mainImage").src = "forest.bmp";

等等。我知道，这可以以更好看的方式完成，而不是if-else每次都使用，但这不是我当前的问题。

我注意到的是，每张图片在我的主index.html服务器上放置在远程服务器上时都需要一些时间来加载（在本地加载速度很快），所以为了克服这个问题，我想预加载所有图片，旁边有一个漂亮的进度条或一些数字轨道。

为此，我创建了一个单独的 html，这将是某种介绍。我想遍历所有可能的数值，比如说，范围1为1000. 每次，更新myImage为该值。在为 赋值后，将调用上面myImage的函数。然后，相应地更改实际来源 。这样就完成了一次迭代。只有在图像加载给用户之后，我才想移动到范围内的下一个值。我尝试在网上阅读有关and和 promises 的内容，但无法为我的案例实现这一点。makeImage()if-elsemainImage[1,1000]waitasync

到目前为止，我的代码是由主要的加载方法构建的：

async function loadAllImages()
            {
                for(var valueOfCell = 1; valueOfCell <= 1000; valueOfCell ++)
                {
                    myImage = valueOfCell;
                    makeImage();
                    let loadedImage = await loadImage();
                }
            }

等待函数是：

function loadImage() {
                const img = new Image();
            
            
                return new Promise((resolve, reject) => {
                  img.addEventListener("load", () => {
                    resolve();
                  });
            
                  img.addEventListener("error", () => {
                    reject();
                  });
            
                  img.src = document.getElementById("mainImage").src;
                });
            }

问题之一是，我正在使用一个Image对象，说实话，我没有用。我不妨说上面的代码是我在网上找到的东西组合而成的，我只是不知道如何使用await.

如果有人能在这方面为我提供帮助，我将非常高兴，尤其是了解它的用法await以及如何在我的情况下使用它。

标签： javascripthtmlasynchronousload