javascript - 如何确定 HTML block 何时完全呈现

Question

我正在使用 AJAX 调用向页面动态添加 HTML block 。我需要知道元素添加到页面后的高度，但我无法获得准确的结果，因为添加的元素需要未知的时间来呈现。有什么方法可以确保在页面上的元素完成呈现后运行某些 JS。

Answer 1

DOM 是同步操作的，所以当您调用 appendChild 时，HTML 会“完全呈现”/append/innerHTML/etc 返回。

但是，不会同步发生的是资源(即图像)的加载。因此，虽然您可以在插入内容后在行中检查新插入内容的渲染高度，但该高度不会包括任何图像的高度。

要解决此问题，您可以明确指定图像的宽度和高度 – <img width=... height=...> – 或者您可以收听 load每个新插入的图像上的事件。每次事件触发时，重新计算元素的高度。 (请注意，每张新图像都会发生一次。)像这样:

$('#somediv').html('... <img src="..."> ...'); // or whatever
$('#somediv img').on('load', function() {
    var h = $('#somediv').height();
    // ...and do what you will with the height
});