html/js：单页应用程序中是否存在“页面加载”事件？答案

【问题标题】：html/js: is there a "page loaded" event in single page applications?html/js：单页应用程序中是否存在“页面加载”事件？
【发布时间】：2012-11-08 11:31:10
【问题描述】：

我正在构建一个单页应用程序，它通过 ajax （预）加载不同页面的内容。当用户导航时，应用程序将特定标签内的旧内容替换为新内容（ajax 数据）。这个新内容可以是例如一篇包含文字和图片的文章。

我的问题是：在替换内容并加载新内容的每个外部资源后是否会触发一个事件？就像“dom 准备好”以刷新 DOM？

【问题讨论】：

也许这会有所帮助：stackoverflow.com/questions/1324647/…
我认为那里不会触发任何事件。但您可以使用 ajax 回调来执行此操作。
@enhzflep 我知道何时插入节点，因为我自己做 ;) 所以DOMNodeInserted 事件没有帮助。 @mtk 但是当 html 从服务器到达时会触发 ajax 回调 - 在将此内容附加到 DOM 并加载资源（图像等）之后，我需要一个事件。
好吧，在那种情况下（当我有一个 DOMContentChange 事件时我错了），人们会认为这样做的方式是“正常”方式 - 即，计算元素将需要加载并附加 onload 或 onerror 处理程序以增加加载/失败的数量。无论如何，我会做一个测试——我猜你的元素比第一个资源加载之前可以处理的要少。我猜 document.querySelectorAll('#conainerId img') 将是我的第一个停靠港。您可能已经意识到这一点并正在寻找更清洁的解决方案。 :) 有趣的问题，顺便说一句。书签。
@enhzflep 是的，想到了这一点，但更清洁的解决方案会很棒。

标签： javascript html singlepage

【解决方案1】：

~~是的，jQuery has a document.ready event 应该适合你。~~

但是，如果您不想导入库，您可以replicate jQuery's event。

编辑

原来我没有注意。

修改 DOM 时不会触发任何事件，因此无法在类似的情况下添加侦听器。

您必须手动跟踪 DOM 上的修改。您可以在您使用的修改函数中添加“回调”：

function addSomethingToPage(data){
    data.doSomething():
    domReady();
}

function domReady(){
    //re-usable "callback"
}

【讨论】：

jQuery 的 document.ready 在第一次页面加载时只被调用一次 - 所以这不起作用。
问题（或疑问）仍然相同：何时准确调用domReady()，因为data.doSomething() 是异步的（图像加载等）。就像 enhzflep 提到的 in his comment 一样，我可以将 EventListeners 添加到每个 <img> 但我希望有一个更清洁的解决方案......
如果存在这样更清洁的解决方案，恐怕我不知道。