Javascript 如何检测所有元素'；s的内容是否已加载？

我想知道如何检测动态附加的HTML元素中的所有内容是否都已加载。元素的内容可能是文本和图像，也可能是视频。我需要检测它以获得正确的元素高度值。 我认为

MutationObserver

不是解决这个问题的正确方法，因为它只检测节点是否已更改或其属性。我必须检测元素的内容何时被加载。 将

load

事件委派给父级不会改变任何事情。

---

有什么建议吗？

您很可能需要一个javascript，它有一个常量setTimeout来检查元素的长度。（未加载的元素的长度通常为0或无效）

这是我们不久前遇到的情况，可能也适用于您的情况。它是用于youtube的，用于检测某些元素何时完成加载，但看到您的问题，这个概念也适用

---

您可以通过在AJAX调用中使用回调函数来实现这一点。在我脑海中，我不记得在香草javascript中是如何工作的，但在jquery中，它看起来是这样的：

$.ajax({
    url: 'my-url'
}).done(function(){
    // This only fires once the AJAX request / response has complete
    populateElement();
    fixElementHeight();
});

通过这样做，您可以确保在更新元素之前拥有所有内容。元素更新后，就可以测量其高度。如果新内容的一部分是图像，或者需要获取的其他内容类型，那么我将在populateElement函数中进行获取：

var contentImage = new Image(imgWidth, imgHeight);
$(contentImage).click(function(event){
    ...
});
contentImage.src = 'source of image';

---

我决定使用Javascript承诺来处理图像加载事件。我正在为每个图像创建一个新的承诺，并在加载所有图像后更新我的应用程序。

---

因此，没有其他方法可以委托父对象来检测是否加载了所有图像。

如何加载文本内容？我从AJAX响应中获取字符串形式的内容。字符串包含HTML标记，如

，

，等等。我会根据需要添加它。因此，对于文本内容，您可以知道它何时完成加载（即ajax请求成功时）。至于图像，您需要监听img标签的“加载”事件。对于视频，这取决于什么类型的视频，它们是youtube、flash、html5吗？我试图避免在每个图像/视频中添加事件侦听器，而是使用父容器上的事件委派。在我看来有点不正常。对于这种检测，使用超时并不是最好的解决方案。因为你永远不知道加载元素中的所有图像需要多长时间。这不是正确的解决方案。问题不在AJAX请求中，而是在图像加载事件中。此时您也可以向图像添加加载事件，请参阅我所做的编辑。这里有更多的信息