修改DOM后的window.onload等效方法是什么？

Question

修改DOM后的window.onload等效方法是什么？

javascriptjquerydom

5

当页面首次加载时，我们可以使用window.onload确保在执行操作之前所有资源已加载。

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

（使用jQuery的解决方案也可以）。

- UpTheCreek

也许你应该明确地说明这一点。DOM准备就绪和所有资源加载完成是两个不同的事情。 - Felix Kling

1

只是为了澄清，因为您似乎没有区分load和ready，在jQuery中，.load()发生在页面完全渲染时，而.ready()发生在DOM层次结构构建完成时。如果您的代码依赖于已加载的资源（例如，您需要获取图像的尺寸），则应使用.load()确保在所有所需资源可用时执行您的代码。否则，您可以使用.ready()加快速度，因为您的代码将在渲染时执行。 - excentris

是的，@netrunner说得好 - 我会修改问题... - UpTheCreek

可能是重复的问题：jQuery Ajax等待所有图像加载完成。 - Jashwant

我更喜欢对于图片使用imageLoaded，对于其他内容使用特定div的load()函数。参考链接：http://stackoverflow.com/questions/10822619/jquery-wait-till-ajax-page-is-fully-loaded。 - Jashwant

显示剩余3条评论

3个回答

0

您可以使用.done()。

描述：添加处理程序，当延迟对象被解决时调用。

此外还有jQuery插件{{link2：在这里查看}}

- Dipesh Parmar

1

不确定我是否理解Dipesh的意思。我可以将完成事件附加到来自ajax调用的承诺，但这只会告诉我何时获得数据，而不是插入DOM后开始加载任何资源的情况。或者您的意思是别的什么？ - UpTheCreek

0

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

你可以在这里找到测试用例：http://maakmenietgek.nl/testcases/domready/ 请注意，我无法在fiddle中使其工作，因此需要一个独立的测试用例

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后显示

- bart s

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nadav Ben-Gal · Accepted Answer

简短回答：不行。

详细回答：如果您知道自己在寻找什么，可以使用变异观察器(https://developer.mozilla.org/en-US/docs/DOM/MutationObserver)。它只支持新版浏览器，在某些版本的Chrome中，当与闭包一起使用时会出现内存泄漏。

顺便说一句， document.ready无法告诉您是否已加载所有(或任何..)资源。它只会告诉您DOM已准备就绪(这是load函数，它只会在下载了所有资源(除了使用JavaScript请求的任何资源)后才会触发)。