Как я могу обнаружить все изображения, загруженные в HTML-привязку?

Question

В моем шаблоне компонентов у меня есть такой контейнер

<div [innerHTML]="somehtml | safeHtml"></div>

HTML содержит изображения со стандартными тегами изображений как

<img src="http://google.com/someimage.png"/>

Я хочу знать, когда изображения внутри моего HTML полностью загружены. Как я могу проверить это?

P.S .: safehtml - это просто дезинфицирующее средство

РЕДАКТИРОВАТЬ: Я ищу решение на основе событий, а не проверить во временных интервалах! Также мне нужно решение специально для этого контейнера

Answer 1

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

HTML:

<div [innerHTML]="somehtml | safeHtml" id="div-to-check"></div>

TS:

this.somehtml = `your html`;
window.setTimeout(() => { // Let's make it async to execute it in the next tick
  const promises = Array.from(
    document.querySelectorAll('#div-to-check img')
  ) // get all images
  .map((img: HTMLImageElement) => {
    if (img.complete) {
      return Promise.resolve(); // Check if the image already loaded. Maybe it's been too fast
    }
    return new Promise((resolve, reject) => {
      img.onload = resolve; // it resolves when it loads
      img.onerror = reject; // avoids infinite waiting
    });
  });

  Promise.all(promises)
  .then(() => {
    console.log('all images loaded!');
  })
  .catch(() => {
    console.error('an image didn\'t load');
  });
});

Answer 2

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

jQuery(window).load(function () {
        alert('page is loaded');

        setTimeout(function () {
            alert('page is loaded and 1 minute has passed');   
        }, 60000);

    });