{"id":141,"date":"2016-03-10T19:20:35","date_gmt":"2016-03-10T19:20:35","guid":{"rendered":"http:\/\/www.federicojacobi.com\/2\/?p=141"},"modified":"2016-03-10T19:20:35","modified_gmt":"2016-03-10T19:20:35","slug":"to-document-ready-or-not-to-document-ready-that-is-the-question","status":"publish","type":"post","link":"https:\/\/federicojacobi.com\/2016\/03\/10\/to-document-ready-or-not-to-document-ready-that-is-the-question\/","title":{"rendered":"To $(document).ready() or not to $(document).ready() ? that is the question."},"content":{"rendered":"
\n

TLDR;<\/h4>\n

If you place your JS\/jQuery below the elements, you don’t have to use $(document).ready.<\/p><\/blockquote>\n

 <\/p>\n

Wrapping all your Javascript in a $(document).ready. All the cool kids are doing it, and it is safe to do so. However, this doesn’t come without drawbacks. Also, there multiple considerations when it comes to loading jQuery itself, but that’s a different conversation.<\/p>\n

jQuery SHOULD be loaded on the footer of your <html>. At this point, wrapping or not doesn’t really matter. The magic lies in the fact the by the time your JS runs, the elements are already on the page (aka above the script you are running ).<\/p>\n

<html>\n\t<head>\n\t\t<title>To .ready or not to .ready<\/title>\n\t<\/head>\n\t<body>\n\t\t<p id=\"first\">Some random text here<\/p>\n\t\t<p id=\"second\">Some random text here 2<\/p>\n\t\t<p id=\"third\">Some random text here 3<\/p>\n\t\t<div>\n\t\t\tSome div content\n\t\t<\/div>\n\t\t<script src=\"http:\/\/code.jquery.com\/jquery-1.12.0.min.js\"><\/script>\n\t\t<script>\n\t\t\t\/\/ No need to wrap, but go ahead, it can't hurt.\n\t\t\t$( document ).ready( function() {\n\t\t\t\t$( '#first' ).css( 'background', 'yellow' );\n\t\t\t\t$( '#second' ).css( 'background', 'blue' );\n\t\t\t\t$( '#third' ).css( 'background', 'red' );\n\t\t\t} );\n\t\t<\/script>\n\t<\/body>\n<\/html><\/pre>\n
 <\/p>\n
But let’s say you are forced to load jQuery in the <head> AND you are also forced (or want) to place your JS on <head> as well … now you HAVE to use $(document).ready( function() {} ); because by the time the JS runs, the elements to be selected haven’t been seen by the browser yet.<\/p>\n
<html>\n\t<head>\n\t\t<title>To .ready or not to .ready<\/title>\n\t\t<script src=\"http:\/\/code.jquery.com\/jquery-1.12.0.min.js\"><\/script>\n\t\t<script>\n\t\t\t\/\/ You have to wrap, or nothing will happen\n\t\t\t$( document ).ready( function() {\n\t\t\t\t$( '#first' ).css( 'background', 'yellow' );\n\t\t\t\t$( '#second' ).css( 'background', 'blue' );\n\t\t\t\t$( '#third' ).css( 'background', 'red' );\n\t\t\t} );\n\t\t<\/script>\n\t<\/head>\n\t<body>\n\t\t<p id=\"first\">Some random text here<\/p>\n\t\t<p id=\"second\">Some random text here 2<\/p>\n\t\t<p id=\"third\">Some random text here 3<\/p>\n\t\t<div>\n\t\t\tSome div content\n\t\t<\/div>\n\t<\/body>\n<\/html><\/pre>\n
 <\/p>\n
From\u00a0https:\/\/learn.jquery.com\/using-jquery-core\/document-ready\/<\/p>\n
Code included inside $( document ).ready()<\/code> will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute. Code included inside $( window ).load(function() { ... })<\/code> will run once the entire page (images or iframes), not just the DOM, is ready.<\/p><\/blockquote>\n
Here’s where the issue lies. When you use $(document).ready() you need to wait for the entire page to load!<\/strong> So, if you want to have your JS do some kind of effect, like a sticky sidebar, or transitions, or anything at all, they will not happen instantly. Sometimes, this isn’t an issue, but the more images and external script your page has, the longer it takes for your js to run. This can be unacceptable, as most of the times, this causes your effect to start working at weird times, making the site … well … act weird.<\/p>\n
The solution: instead of wrapping in .ready(), place the <script> just below the elements you want it to work on. Again, by the time your script runs, the elements have already been “seen” by the browser, and the effects will kick in even though the page hasn’t completely loaded yet. No need to wait.<\/p>\n
<html>\n\t<head>\n\t\t<script src=\"http:\/\/code.jquery.com\/jquery-1.12.0.min.js\"><\/script>\n\t<\/head>\n\t<body>\n\t\t<p id=\"first\">Some random text here<\/p>\n\t\t<p id=\"second\">Some random text here 2<\/p>\n\t\t<p id=\"third\">Some random text here 3<\/p>\n\t\t<script>\n\t\t\t\/\/ Wait? Ain't nobody got time for that\n\t\t\t$( '#first' ).css( 'background', 'yellow' );\n\t\t\t$( '#second' ).css( 'background', 'blue' );\n\t\t\t$( '#third' ).css( 'background', 'red' );\n\t\t<\/script>\n\t\t<div>\n\t\t\tSome div content\n\t\t<\/div>\n\t<\/body>\n<\/html><\/pre>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
TLDR; If you place your JS\/jQuery below the elements, you don’t have to use $(document).ready.   Wrapping all your Javascript in a $(document).ready. All the cool kids are doing it, and it is safe to do so. However, this doesn’t come without drawbacks. Also, there multiple considerations when it comes to loading jQuery itself, but…  Read more »<\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,6],"tags":[],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/federicojacobi.com\/wp-json\/wp\/v2\/posts\/141"}],"collection":[{"href":"https:\/\/federicojacobi.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/federicojacobi.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/federicojacobi.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/federicojacobi.com\/wp-json\/wp\/v2\/comments?post=141"}],"version-history":[{"count":0,"href":"https:\/\/federicojacobi.com\/wp-json\/wp\/v2\/posts\/141\/revisions"}],"wp:attachment":[{"href":"https:\/\/federicojacobi.com\/wp-json\/wp\/v2\/media?parent=141"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/federicojacobi.com\/wp-json\/wp\/v2\/categories?post=141"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/federicojacobi.com\/wp-json\/wp\/v2\/tags?post=141"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}