Geek Answers Handbook

How did jquery implement $ (document) .ready ()?

how did jquery implement $(document).ready() ?

Of course, I can read the code, but I'm looking for a concept ...

+8
javascript jquery browser
source share
3 answers

In general, It checks if the browser has loaded the body element into the DOM tree, in which case it executes cb () without waiting for other requests (images ...)

otherwise, he waits for something and double-checks ..

+3
source share

Concept: jQuery.ready

While JavaScript provides a load event to execute code when rendering the page, this event does not fire until all assets, such as images, are fully received. In most cases, a script can be run as soon as the DOM hierarchy is completely built. The handler passed to .ready () will execute after the DOM is ready, so this is usually the best place to attach all other event handlers and run other jQuery code. When using scripts that rely on the value of CSS style properties, it is important to reference external style sheets or embed style elements before referencing scripts.

It implements it depending on the browser (for example, IE), but accepts some special cases, for example, when it is called after loading the DOM. (I do not know how to answer this question without looking at the source).

The heart of jQuery.ready (what sets up event bindings):

 bindReady: function() {

Only bind once.

  if ( readyBound ) { return; } readyBound = true;

Make sure that it handles the case when it is ready after "DOM load".

  // Catch cases where $(document).ready() is called after the // browser event has already occurred. if ( document.readyState === "complete" ) { // Handle it asynchronously to allow scripts the opportunity to delay ready return setTimeout( jQuery.ready, 1 ); }

Standard W3C event model.

  // Mozilla, Opera and webkit nightlies currently support this event if ( document.addEventListener ) { // Use the handy event callback document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );

The revolution in the old school.

  // A fallback to window.onload, that will always work window.addEventListener( "load", jQuery.ready, false );

IE event model (Opera will probably work with this).

  // If IE event model is used } else if ( document.attachEvent ) { // ensure firing before onload, // maybe late but safe also for iframes document.attachEvent("onreadystatechange", DOMContentLoaded);

The revolution in the old school.

  // A fallback to window.onload, that will always work window.attachEvent( "onload", jQuery.ready );

More behavior to make it work with IE in different contexts. Note that event binding for 'onreadystatechange'

  // If IE and not a frame // continually check to see if the document is ready var toplevel = false; try { toplevel = window.frameElement == null; } catch(e) {} if ( document.documentElement.doScroll && toplevel ) { doScrollCheck(); } } },

doScrollCheck sets a “poll” in IE, which will only call the handler if it succeeds. See the source for more details (it uses IE's quirk).

Happy coding.

+20
source share

It tests if document.body does not evaluate something false: http://james.padolsey.com/jquery/#v=1.5.0&fn=jQuery.ready

+2
source share

More articles:


All Articles