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

【问题标题】：how can I determine when a block of HTML is fully rendered如何确定何时完全呈现 HTML 块
【发布时间】：2023-03-10 12:40:02
【问题描述】：

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

【问题讨论】：

Wait untill previous .append() is complete的可能重复
也许负责渲染的代码可以设置一些标志。
这并不完全符合犹太教规，但会在附加的 HTML 工作后添加 <script> 标记吗？（老实说不知道）
只需使用 google chomre "inspect element" 选项来观察 HTML 代码

标签： javascript html

【解决方案1】：

DOM 是同步操作的，因此当您对 appendChild/append/innerHTML/etc 的调用返回时，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
});

【讨论】：

【解决方案2】：

如果不查看您的标记和/或代码，很难知道，但如果您正在处理 AJAX，您可能希望在 .done() 方法中捕获一些逻辑。看这里：

jQuery .done()

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

jQuery promises

【讨论】：

如果他从 AJAX 调用的结果中添加内容，根据定义，他已经在成功回调中做某事。
你说得对，@josh3736，但他没有提供任何代码来知道具体在做什么。