{"id":1729,"date":"2013-01-03T18:51:01","date_gmt":"2013-01-03T23:51:01","guid":{"rendered":"http:\/\/www.rexfeng.com\/blog\/?p=1729"},"modified":"2013-01-03T18:54:29","modified_gmt":"2013-01-03T23:54:29","slug":"jquery-dom-ready-handlers","status":"publish","type":"post","link":"https:\/\/www.rexfeng.com\/blog\/2013\/01\/jquery-dom-ready-handlers\/","title":{"rendered":"jQuery DOM ready handlers"},"content":{"rendered":"

As you work with JavaScript & jQuery, you will quickly get accustomed to wrapping your JS scripts with a DOM ready check<\/a>. You generally want to do this, because you don’t want your DOM-manipulating JS to run before the DOM is fully loaded.<\/p>\n

The standard jQuery ready function<\/a> is:<\/p>\n

[cc]
\n $(document).ready(function(){
\n \/\/ Your code here
\n });
\n[\/cc]<\/p>\n

If you’ve seen the jQuery ready shortcut, you can also use this (equivalent to the above):<\/p>\n

[cc]
\n $(function() {
\n \/\/ Your code here
\n });
\n[\/cc]<\/p>\n

How does this work? Diving into jQuery source<\/a>, you can see on line 173 that jQuery checks if what is passed in is a function and applies [cci]ready[\/cci] to it:<\/p>\n

[cc]
\n \/\/ HANDLE: $(function)
\n \/\/ Shortcut for document ready
\n } else if ( jQuery.isFunction( selector ) ) {
\n return rootjQuery.ready( selector );
\n }
\n[\/cc]<\/p>\n

Also, I want to show how you could wrap your JS code without jQuery. Traditionally, it looks like this:<\/p>\n

[cc]
\n window.onload = function(){
\n \/\/ Your code here
\n }
\n[\/cc]<\/p>\n

Note the traditional way using [cci]window.onload[\/cci] will happen later than jQuery’s [cci]ready[\/cci] event. Code snippets to run your JS upon DOM ready without jQuery are available online<\/a>.<\/p>\n

Finally, if you want to wait for both the DOM<\/a> and complete page (including all frames, objects and images) to be loaded<\/a> using jQuery, you can use:<\/p>\n

[cc]
\n $(window).load(function() {
\n \/\/ Your code here
\n });
\n[\/cc]<\/p>\n

Running JS with jQuery upon DOM ready is simple. Using the jQuery ready shortcut is easy and works well.<\/p>\n

jQuery without jQuery<\/a> is a series that aims to open up the jQuery<\/a> black box. jQuery is just JavaScript, so you should feel comfortable working at lower levels of abstraction and looking at the jQuery source code<\/a> written in JavaScript.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"

As you work with JavaScript & jQuery, you will quickly get accustomed to wrapping your JS scripts with a DOM ready check. You generally want to do this, because you don’t want your DOM-manipulating JS to run before the DOM is fully loaded. The standard jQuery ready function is: [cc] $(document).ready(function(){ \/\/ Your code here […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1029],"tags":[1058,1046,1023,1052,1054,1057,1056],"class_list":["post-1729","post","type-post","status-publish","format-standard","hentry","category-programming","tag-dom","tag-javascript","tag-jquery","tag-jquerywithoutjquery","tag-js","tag-load","tag-ready"],"_links":{"self":[{"href":"https:\/\/www.rexfeng.com\/blog\/wp-json\/wp\/v2\/posts\/1729","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.rexfeng.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rexfeng.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rexfeng.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rexfeng.com\/blog\/wp-json\/wp\/v2\/comments?post=1729"}],"version-history":[{"count":16,"href":"https:\/\/www.rexfeng.com\/blog\/wp-json\/wp\/v2\/posts\/1729\/revisions"}],"predecessor-version":[{"id":1745,"href":"https:\/\/www.rexfeng.com\/blog\/wp-json\/wp\/v2\/posts\/1729\/revisions\/1745"}],"wp:attachment":[{"href":"https:\/\/www.rexfeng.com\/blog\/wp-json\/wp\/v2\/media?parent=1729"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rexfeng.com\/blog\/wp-json\/wp\/v2\/categories?post=1729"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rexfeng.com\/blog\/wp-json\/wp\/v2\/tags?post=1729"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}