{"id":1146,"date":"2012-09-12T01:03:15","date_gmt":"2012-09-12T01:03:15","guid":{"rendered":"https:\/\/theextremewebdesigns.com\/blog\/?p=1146"},"modified":"2012-09-12T01:03:15","modified_gmt":"2012-09-12T01:03:15","slug":"jquery-document-ready-vs-window-load","status":"publish","type":"post","link":"https:\/\/theextremewebdesigns.com\/blog\/jquery-document-ready-vs-window-load\/","title":{"rendered":"jQuery $(document).ready vs. $(window).load"},"content":{"rendered":"

At some point or the other, you must have come across \u00a0$(document).ready <\/strong>and $(window).load event<\/strong>. At first glance, both of these powerful tools appear to be doing the same job. But did you know the subtle difference between them? Read on to find out the exact difference and how they work.<\/p>\n

jQuery $(document).ready vs. $(window).load<\/h2>\n

Let’s go with the\u00a0jQuery $(window).load event first.<\/h3>\n

The window load event executes only after all the elements of the web page are completely loaded. This means that the page has to load the images, css, any inline styling (if applied), iframes, scripts, etc. completely in order for the\u00a0$(window).load to fire off the associated code. So if it takes 5 seconds to download all of the elements in the webpage, then the\u00a0$(window).load event will fire off only after 5 seconds. It’s corresponding jQuery code will look like this:<\/p>\n

$(window).load(function() {\n\/\/ This alert below is executed only when complete page is completely loaded, including all images, objects, css, frames, etc.\nalert(\"window is loaded\");\n});<\/pre>\n
Now we get to\u00a0$(document).ready<\/h3>\n
The document ready method executes when the HTML document is loaded and the DOM is ready, even if all the graphics, scripts, etc. haven\u2019t loaded yet.\u00a0It’s corresponding jQuery code will look like this:<\/p>\n
$(document).ready(function() {\n\/\/ This alert is triggered when HTML document is loaded and DOM (Document Object Model) is ready\nalert(\"document is ready\");\n});<\/pre>\n
So which one is the right choice and when to use it? Well, there’s no wrong answer. In fact, both of them have their own uses. Here’s what I suggest.<\/p>\n
1. If you have an element\/object that you want to make sure, loads completely in order for an event associated with that element to trigger, then use\u00a0jQuery $(window).load<\/strong>. So let’s say you have an image that you want to be loaded completely in order to fire off some code, then attach the code to the on load event of this image.<\/p>\n
2. If you are not concerned about the elements being loaded and\/or want to execute code unconditionally without connecting it to some other element’s presence in the page, then go for\u00a0jQuery $(document).ready.<\/strong> That way, you can\u00a0hook up your events for certain elements before the window loads.<\/p>\n
Order of execution of\u00a0jQuery $(document).ready and $(window).load<\/h3>\n
    \n
  • jQuery $(document).ready is excuted first.<\/li>\n
  • jQuery $(window).load is\u00a0executed\u00a0later, towards the end of the load of the connected element.<\/li>\n<\/ul>\n
    Your Turn!<\/h5>\n
    Hope this article was able to shed some light on\u00a0jQuery $(window).load vs\u00a0$(document).ready<\/strong>. If you do know of some more reasons, please feel free to share.<\/p>\n","protected":false},"excerpt":{"rendered":"
    At some point or the other, you must have come across \u00a0$(document).ready and $(window).load event. At first glance, both of these powerful tools appear to be doing the same job. But did you know the subtle difference between them? Read on to find out the exact difference and how they work.<\/p>\n","protected":false},"author":1,"featured_media":395,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[20,13],"tags":[40],"class_list":["post-1146","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery-tips-and-tricks","category-tips-and-tricks","tag-jquery-2"],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/paBnQX-iu","jetpack_sharing_enabled":true,"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/1146","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/comments?post=1146"}],"version-history":[{"count":0,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/1146\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/media?parent=1146"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/categories?post=1146"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/tags?post=1146"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}