Как пытаться поочерёдно загружать изображения, до первого успешно загруженного?

Question

[mumus]

Как загрузить изображения поочередно, если одно не загрузилось, то грузить второе и т.д.?
Есть массив из 4 адресов (обложек видео от ютюба). Сначала грузить первую maxresdefault, если ее нет или она не загрузилась, то грузить вторую и т.д.

const resolutions = ['maxresdefault', 'hqdefault', 'mqdefault', 'sddefault'];
let videoId = 'dQw4w9WgXcQ';

resolutions.forEach(item => {
  let url = 'https://i.ytimg.com/vi/'+videoId+'/'+item+'.jpg';
  loadImage(url)
    .then((img) => {console.log('img ', img); document.body.append(img)})
    .catch(error => console.error('error ', error));
});

function loadImage(url){
    return new Promise((resolve, reject) => {
        const img = new Image();
        img.addEventListener('load', e => {
            img.naturalWidth <= 240 ? reject(new Error('No image found')) : resolve(img);
        });
        img.addEventListener('error', () => {
            reject(new Error(`Failed to load image's URL: ${url}`));
        });
        img.src = url;
    });
}

Comments

[Артем Андреев]

А есть пример кода вообще? Или как это должно выглядеть?

[mumus]

Артем Андреев, как я понимаю без asynch/await не обойтись?

[Артем Андреев]

mumus, просто хотелось бы знать откуда данные приходят и каким образом

[mumus]

https://codepen.io/mumus/pen/YdBbYw
Вот так будет гораздо понятнее. Как сделать так, что если есть картинка то прервать цепочку?

Answer 1

[0xD34F]

Асинхронная функция, внутри цикл:

async function getFirstLoadedImage(urls) {
  for (const n of urls) {
    try {
      return await loadImage(n);
    } catch (e) {}
  }

  throw 'ничего загрузить не удалось';
}

Или, рекурсия:

const getFirstLoadedImage = (urls, i = 0) => i < urls.length
  ? loadImage(urls[i]).catch(() => getFirstLoadedImage(urls, -~i))
  : Promise.reject('ничего загрузить не удалось');

Пользоваться этим, понятное дело, так:

getFirstLoadedImage(resolutions.map(n => `https://i.ytimg.com/vi/${videoId}/${n}.jpg`))
  .then(img => document.body.append(img))
  .catch(console.error);

Answer 2

[Алексей]

Это ТЗ или вопрос?
Если это ТЗ, тогда не хватает конкретики.
Если вопрос, тогда в нем не хватает того кода, который вы написали.

Comments

[mumus]

Как такогого кода нет, вот я набросал сниппет
https://codepen.io/mumus/pen/WLZbYg
если это вообще можно сниппетом можно назвать. Хотелось бы просто чтобы мне кто-нибудь на примере await/async показал пример как это сделать.
Тут в консоли выводятся 4 картинки, начиная с самой большой. Вот собственно цель, если не загрузится первая (самая большая) то грузим вторую и т.д.