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

在我的组件模板中，我有这样一个容器

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

HTML包含带有标准图像标记的图像 像

我想知道HTML中的图像何时被完全加载。我怎样才能检查这个

附言：safehtml只是一个消毒管

---

编辑：我正在寻找基于事件的解决方案，而不是按时间间隔签入！此外，我还需要一个针对该容器的具体解决方案，下次请先阅读一些其他问题，并尝试自己解决问题，然后再编写自己的问题 但解决办法是：

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

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

    });

---

你可以试试这样的。我不喜欢它，因为它不是有角度的方式，但因为你的模板是一个字符串，我几乎不相信有更好的东西：

HTML:

---

您可以执行如下操作：

jQuery（window）.load（函数（）{alert（'page is loaded'）；setTimeout（函数（）{alert（'page is loaded and 1min has'）；}，60000）；}）

@DigitalJedi不，这只会在页面上的所有内容都已加载时触发是的，当然，但这只是基于间隔的检查。我想听一个活动或订阅一些东西对不起，你说得对。无论如何，这真的意味着页面上的所有其他内容都被加载了，不仅仅是我在div中的图像。对吗？那么这就不是你的解决方案和你可能提到的其他解决方案所提供的。我的用例是：我有几个带有绑定HTML的容器，这些容器是由用户通过CMS提供的，我想为每个容器制作一个加载动画，直到它完全初始化。但是，当特定容器的内容准备好时，动画应该消失。是的，这是我正在寻找的方向，因为它不依赖于时间间隔，并且适用于特定容器。正如您所说，不是角度方式。同样，将模板作为字符串传递也不是角度方式：P角度方式具有

img

对象数组，并在插入dom之前检查

onload

对每个对象的回调。但是在这种情况下，元素只有在执行[innerHTML]时才开始存在，所以这是唯一的解决方案。这是一个类似CMS的用例，我有一些用户提供的HTML。如果我想像你说的那样做，我必须首先解析用户的HTML。而且，我补充说，Angular不知道这些元素是否存在。您应该为每个

img

创建一个视图，然后使用

ViewChild

查询它们。这听起来有点过分了。事实上，在不将HTML附加到某个DOM之前，您无法解析HTML。您可以创建一个伪文档，然后附加HTML，插入

onload

回调，然后从伪文档中删除元素并附加到真正的DOM，但是这个实现没有太大的改变。也许它可以避免异步步骤

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

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