AJAX 加载的 DOM 节点何时“准备好”？

Posted 2023-05-09

【中文标题】AJAX 加载的 DOM 节点何时“准备好”？

【英文标题】：When are AJAX loaded DOM nodes "ready"?

【发布时间】：2014-06-25 17:42:48

【问题描述】：

如果在网页中我在初始页面加载和 DOM 就绪事件之后加载了一些内容，那么插入的节点何时“就绪”，在计算它们的大小的意义上，考虑 CSS 规则等等？

$.ajax(
    url: ajaxUrl,
    success: function (data) 

        var page = $(data).find('.page').first();

        page.appendTo(pages_container);

        // if I try to get the width of an element here, I get 0
        console.log(page.width()); // -> 0

        // but if I do it, let's say 500ms later, now it is computed
        setTimeout(function () 
            console.log(page.width()); // -> correct width, non zero
        , 500);
    
);

是否有任何类型的事件，例如“在插入的 dom 准备就绪”或能够在计算 ajax 插入内容的大小/布局之后执行函数？

【问题讨论】：

@KhorneHoly — 不推荐使用 success 参数。您似乎将它与 jqXHR 对象上的 success 方法混淆了。

onLoad的body标签是页面加载了包括dom结构在内的所有资源时触发的事件

@dreamweiver 父页面的正文？那会很奇怪……据我所见。

您在附加图像吗？如果是这样，在加载之前您无法计算它们的宽度。

【参考方案1】：

您的问题不应该像您概述的那样发生。将元素附加到页面中不是异步操作。 javascript DOM 操作不是多线程的。它只是在应用 DOM 更改后返回。

DOM应该在你的追加完成后就可以使用了（包括大小属性）：

page.appendTo(pages_container); 

通常的原因是在插入 jQuery 对象之前访问属性，或者新的 jQuery 对象在视觉上被隐藏并稍后显示（淡入等），但我在您的代码中看不到任何转换。

问题/想法：

你能模拟一个 JSFiddle 来复制你的问题吗？ 还要检查插入后可能会修改 DOM 的其他插件等。 插入页面中是否有JS代码？ 还有什么浏览器会出现这种情况？

【讨论】：

其实是的，页面中有js代码，实际需要获取宽度/高度的代码其实是自己加载的页面内部，但是发生了在success 中也是如此，如果我散布一些日志语句，我发现代码确实在成功后运行......这是一个很大的 faaaat 页面，但我会尝试在小提琴中提取问题

aaah，你的意思是，通过 ajax 插入的 html 片段中的代码实际上可以在该片段正确插入 DOM 之前运行？ ...这可以解释...但是我该怎么解决这个问题？

是的，只要您将 $(data) 调用应用于加载的原始 HTML/文本，它就可以在断开连接的元素上运行加载的 JS。 JS是否需要在加载的页面内？如果这是另一个问题，您能否在该页面中显示代码？

无法显示该页面，它是某些管理界面的一部分。但是当我有时间时，我会做一个更简单的模型来尝试复制问题。现在我刚刚发现了一个特定的丑陋黑客，它可以让我完全避免这个问题，但我仍然会继续深入挖掘这个解决方案/解释......