Question

我正在使用AJAX调用向页面动态添加HTML块。我需要知道元素添加到页面后的高度，但是我无法得到准确的结果，因为添加的元素需要一段未知的时间来渲染。是否有任何方法可以确保在页面上完成元素渲染后运行某些JS。

Answer 1

同步操作DOM，因此当您致电appendChild / append / innerHTML /等返回时，HTML就会“完全呈现”。

然而，

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

要解决此问题，您可以明确指定图像的宽度和高度 - <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
});

Answer 2

如果没有看到你的标记和/或代码，很难知道，但如果你正在处理AJAX，你可能想要在.done()方法中捕获一些逻辑。看看这里：

jQuery .done()

另外，你可能想看看jQuery的承诺：

jQuery promises

如何确定何时完全呈现HTML块

2 个答案: