Question

我想知道如何检测是否加载了动态附加的HTML元素中的所有内容。元素的内容可能是文本和图像，也可能是视频。我需要检测它以获得正确的元素高度值。我认为MutationObserver不是正确的解决方案，因为它只检测节点是否已更改或其属性。我必须检测元素的内容何时被加载。将load个事件委托给父母并不会改变任何事情。有什么建议吗？

Answer 1

您可以通过在AJAX调用上使用回调函数来完成此操作。在我的头脑中，我无法记住它在vanilla 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';

Answer 2

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

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

http://www.gambit.ph/how-to-use-the-javascript-youtube-api-across-multiple-plugins/

Answer 3

我决定使用Javascript promises来处理图片加载事件。我正在为每个图像创建一个新承诺，并在加载所有图像后更新我的应用程序。因此，没有其他方法可以在父级上进行委派，以检测是否所有图像都已加载。

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

3 个答案: