logo标签列表

document.ready()函数何时被调用？

javascriptjquery
7
在下面的解析阶段中， enter image description here $document.ready() 何时被执行？
当DOM加载完成时。 - DinoMyte
在“交互阶段”的开始 - dandavis
你现在明白了吗，overexchange？ - amanuel2
@AmanuelBogale 我可以说ready不是$(document).ready()中的事件名，而是一个包装函数吗？ - overexchange
2个回答
10
当HTML加载完成后，DOM/文档对象模型何时加载的简单答案是：$( document ).ready() 中包含的代码只有在页面文档对象模型(DOM)准备好执行JavaScript代码时才会运行。 文档

我也在这里解释得很清楚：

https://discuss.codecademy.com/t/window-onload-vs-document-ready/19000

当我说：

jQuery document.ready会在HTML全部准备好但图片和其他资源尚未完成时运行您的代码。这是您可以使用JavaScript更改DOM的最早可能时间，因此它被广泛使用。在现代浏览器（如Google Chrome）中，它被DOMContentLoaded3替换。再次了解更多信息。

所以根据您的图片： 输入图像描述

$document.ready(fn)将在交互式界面开始时加载，当Dom“完成”加载时...

2
什么时候执行 $document.ready()？
.ready() 可以被执行多次。
.ready(handler) 返回 jQuery，用于指定当 DOM 完全加载时要执行的函数。如果在 DOM 初始化后调用 .ready()，则会立即执行传入的新处理程序。.ready() 方法只能在与当前文档匹配的 jQuery 对象上调用，因此可以省略选择器。 

n = -1;

function ready() {
  document.getElementsByTagName("p")[0].textContent += "ready " + ++n + "\n";
}

$(document).ready(ready);

$(document).ready(function() {
  ready();
  $(document).ready([function() {
    ready()
  },
    function() {
      $(document).ready(function() {
        ready();
        $(document).ready([
          function() {
            ready()
          }, function() {
          ready()
          if (n === 5) $(document).ready(function() {ready()})
        }]);
      
      })
    }
  ])
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>

<body>
  <p></p>
</body>

查看源代码请访问 ready.js。
if ( document.readyState === "complete" ||
    ( document.readyState !== "loading" && !document.documentElement.doScroll ) ) {

    // Handle it asynchronously to allow scripts the opportunity to delay ready
    window.setTimeout( jQuery.ready );

} else {

    // Use the handy event callback
    document.addEventListener( "DOMContentLoaded", completed );

    // A fallback to window.onload, that will always work
    window.addEventListener( "load", completed );
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接