Как вызвать img.src - синхронно?

Question

у меня есть масив из ссылок изображений . после я проверяю на то что изображения ли это и вывожу на странице.

let images = ["http://site.com/photo.png" , "http://site.com/somelink.html" , "http://site.com/photo.png"];
let images_filter = [];

for(let i =0 ; i < images.length;i++){
   let image = new Image();
   image.src = images[i];
   image.onload = function(){
      images_filter.push(image.src);
   };
}

cкрипт работает но работает асинхронно и в итоге сортировка которая была сделана до этого просто пропадает , как запустить скрипт синхронно ?

Answer 1

Можно обернуть загрузку в Promise

async function whenImage(image){
return new Promise((resolve, reject) => {
  const isLoaded = image.complete;
  if (isLoaded)
    resolve(image);

  image.addEventListener("load", () => resolve(image), {once: true})
  image.addEventListener("error", reject, {once: true})

})
}

С помощью ключевого слова await вы заставляете интерпретатор ждать выполнения Обещания (Promise). То есть загрузки изображения. https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/await

await whenImage()

for(let i = 0; i < images.length; i++){
   const image = new Image();
   image.src = images[i];
   await whenImage(image);

   images_filter.push(image.src);
}

Однако загрузка изображений может происходить быстрее, если она асинхронная. Возможно, лучше переделать?

БЛОГ НА HUSL

Как вызвать img.src - синхронно?

Ответы (1 шт):