修改DOM后的window.onload等效？答案

【问题标题】：window.onload equivalent after modifying the DOM?修改DOM后的window.onload等效？
【发布时间】：2013-03-29 09:51:49
【问题描述】：

当页面第一次加载时，我们可以使用window.onload 来确保在我们做某事之前所有资源都已加载。

我的问题是，如果我们修改 DOM（例如，根据 ajax 请求插入一些 html），当文档再次处于“加载”状态时是否会触发任何事件？ （例如，当插入的 html 包含多个图像时）。

（用 jQuery 解决就可以了）。

【问题讨论】：

@Felix - 我不想检测对 DOM 的更改，我想在更改 DOM 后检测资源何时加载。您提到的所有这些问题都是关于检测变化的。
也许你应该明确说明这一点。准备就绪的 DOM 和正在加载的所有资源是两件不同的事情。
只是为了澄清一下，因为您似乎没有区分加载和就绪，在 jQuery 中 .load() 发生在页面完全呈现时，而 .ready() 发生在 DOM层次结构被构建。如果您的代码依赖于加载的资源（例如，您需要获取图像的尺寸），您应该使用 .load() 来确保在所有需要的资源可用时执行您的代码。否则，您可以使用 .ready() 来加快速度，因为您的代码将在渲染时执行。
是的，好点@netrunner - 我会修改问题...
@FelixKling - 问题已编辑。请您删除这些不相关问题的关闭。

标签： javascript jquery dom

【解决方案1】：

简短的回答：没有。

长答案：如果你知道你在找什么，你可以使用突变观察者 (https://developer.mozilla.org/en-US/docs/DOM/MutationObserver)。它仅在新浏览器中支持，并且在某些版本的 chrome 中与闭包一起使用时会出现内存泄漏。

顺便说一句， document.ready 不会告诉您是否所有（或任何..）资源都已加载。它只会告诉你，dom 已准备好（即加载函数，它只会在 all 资源（嗯，任何不使用 javascript 请求的资源）被下载后触发）。

【讨论】：

这方面有什么更新吗（The short answer: NO）？

【解决方案2】：

您可以使用.done()。

说明： 添加在解析 Deferred 对象时要调用的处理程序。

还有jQuery插件See Here

【讨论】：

不确定我是否关注 Dipesh。我可以在 ajax 调用的 promise 上附加一个 done，但这只会告诉我何时拥有数据，而不是关于在我将其插入 DOM 后已开始加载的任何资源。还是你的意思是别的？

【解决方案3】：

我会说是（我不知道所有浏览器是否都支持。我在 safari 和 chrome 中使用它）

你可以在这里找到测试用例：http://maakmenietgek.nl/testcases/domready/ 请注意，我无法让它在小提琴中工作，这就是为什么一个独立的测试用例

index.html 看起来像这样

<!DOCTYPE html>
<head>
  <title>Testcase</title>
  <script src="jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      $('#clickme').click(function() {
        $.get('ajaxdata.html', function(data) {
            $('#addhere').html(data);
        });
      });
    })
  </script>
</head>
<body>
  <p id="clickme">clickme</p>
  <div id="addhere">
  </div>
</body>
</html>

$.get 调用加载的数据如下所示

<p>added data</p>
<script type="text/javascript">
    $(document).ready(function() {
        alert('added data');
    });
</script>

将 html 添加到 DOM 后显示警报

【讨论】：