正如标题所暗示的，我有一个要加载的图像列表。我有一个函数，它给出一个从 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赋值后，函数makeImage()，即上面的if-else，被调用。然后，相应地更改 mainImage 的实际来源。这样就完成了一次迭代。 只有在图像加载给用户之后，我才想移动到 [1,1000] 范围内的下一个值。我尝试在网上阅读有关 wait 和 async 以及 promises 的内容，但无法为我的案例实现这一点。

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

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 的用法以及如何在我的情况下使用它。