When does document.ready() get invoked?

后端未结

关注

 2  1908

北荒

In the below parsing phase,

When does $document.ready() get executed?

相关标签:

2条回答

情深已故

2020-12-06 20:15

When does $document.ready() get executed?

.ready() can be executed multiple times

.ready( handler )
Returns: jQuery
Description: Specify a function to execute when the DOM is fully loaded.

If .ready() is called after the DOM has been initialized, the new handler passed in will be executed immediately.

The .ready() method can only be called on a jQuery object matching the current document, so the selector can be omitted.

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>

See soruce at 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 );
}

0 讨论(0)

名媛妹妹

2020-12-06 20:16

Simple anwser when the DOM/Document Object Model Gets Loaded when the HTML Gets Loaded..

Docs

Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute.

I also explained it well here to:

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

Where i said:

jQuery document.ready will run your code when the HTML is all ready, but before images and other resources have finished. This is the earliest possible time that you can change the DOM with JavaScript, so it's widely used. In Modern Browsers like google chrome it is replaced by DOMContentLoaded3. Again more info Here.

So by your picture:

$document.ready(fn) will be loaded at the beggining of interactive face when the Dom has "completed" loading...

0 讨论(0)
发布评论:

提交评论
- 加载中...