Блог

Как следует из названия, у меня есть список изображений, которые я хочу загрузить. У меня есть функция, которая при заданном числовом значении от 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 и обещаниях, но не смог реализовать это для моего случая.

До сих пор мой код построен из основного метода загрузки:

 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 и как использовать его в моем случае.