Не работает await Promise.all

Question

Не ждет выполнения всех промисов, а просто после после функции this.load бежит в "третью" функцию, а картинки(загрузку которых я по идее пытаюсь дождаться) все еще продолжают загружаться. Объясните пож, что делаю не так?

Есть функция:

async lazyLoad(ind) {
  if (this.firstForLazy) {
    //этот await не не срабатывает.
    await Promise.all([...this.items[ind].querySelectorAll('.Glazy')].map(child => {
      return this.load(child, child.getAttribute('data-src'))
    }))
  }
}

Функция this.load:

load(el, url) {
  return new Promise((resolve, reject) => {
    el.addEventListener('load', () => {
      el.classList.remove('Glazy')
      resolve()
    })
    el.src = url
  })
}

UPD: В общем я решил добавить lazyLoad в свой слайдер и начал тестово это реализовывать и код пошел "лавиной", на хорошую архитектуру не претендую. первый вызов:

async createSlider() {
   this.buildMainElement()
   if (typeof this.finalSettings.lazyLoad === 'number') { 
       this.setLazyLoad() // - это нам не интересно 
       this.firstLazyLoad() 
    } 
    ...
}

firstLazyLoad:

async firstLazyLoad() { 
    for (let i = 0; i < this.items.length; i++) {
        if(...){ 
            await this.lazyLoad(i) 
        } 
    }
}

Answer 1

Ваш код вполне рабочий. Может, у вас ошибка где-то в другом месте.

async function lazyLoad() {
  //этот await не не срабатывает.
  console.log('before await')
  await Promise.all([...document.querySelectorAll('img')].map(child => {
    return load(child, child.getAttribute('data-src') + Math.round(Math.random() * 500))
  }));
  console.log('after await')
}

function load(el, url) {
  return new Promise((resolve, reject) => {
    el.addEventListener('load', () => {
      el.classList.remove('Glazy')
      resolve()
      console.log('loaded image', url)
    })
    el.src = url
  })
}

(async function() {
  console.log('before lazyLoad')
  await lazyLoad();
  console.log('after lazyLoad')
})();

<img data-src="https://via.placeholder.com/">
<img data-src="https://via.placeholder.com/">
<img data-src="https://via.placeholder.com/">

БЛОГ НА HUSL

Не работает await Promise.all

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