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);

    });

如何检测HTML绑定中加载的所有图像？

2 个答案: