Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Ivan Kusakovic
12,197 Points$(window).load and $(document).ready difference?
What's the difference between these two in jQuery?
5 Answers
Kevin Korte
28,148 PointsDom is loaded when the template has been built. Meaning it knows there is going to be an image, or an asset there, but it hasn't actually loaded in the asset yet.
For instance, open your dev tools, go to the network tab and refresh. You'll see two lines appear on the timeline of the DOM loading, in Chrome anyway, the blue line is the DOMContentLoaded and the red line is the Load. When I did it, the DOM loaded in 2.78 s and the the entire page was loaded with assets and everything in 3.46 s. That is a pretty significant difference, almost three quarters of a second. Which means that when using $(document).ready that code will execute three quarters of a second sooner that $(window).load
So if you're doing any DOM manipulation, almost always will $(document).ready give the impression your site loads faster as it doesn't have to wait for assets to actually load.
These times would be even more drastic if you had a large hero background image. The load time will be significantly slower than the dom ready time, and if you're not needing information from the loaded assets like physical image size, there is no reason to slow you site down by waiting for assets to load when its not necessary.
Does that help?
Kevin Korte
28,148 PointsI think the very first paragraph from the jquery docs describes the difference very well.
And I copy and paste
While JavaScript provides the load event for executing code when a page is rendered, this event does not get triggered until all assets such as images have been completely received. In most cases, the script can be run as soon as the DOM hierarchy has been fully constructed. The handler passed to .ready() is guaranteed to be executed 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's important to reference external stylesheets or embed style elements before referencing the scripts.
In cases where code relies on loaded assets (for example, if the dimensions of an image are required), the code should be placed in a handler for the load event instead.
Let me know if you're still left with questions.
Ivan Kusakovic
12,197 PointsAnd when is DOM ready? When is loaded? It's not clear for me all this.
Ivan Kusakovic
12,197 PointsIf I understand, I can use window.load always but not document.ready always document.ready is when DOM is finished loading, and window.load when all assets are loaded. But what's the process of loading DOM?
Casey Ydenberg
15,622 PointsBasically, loading the DOM just requires downloading the HTML page and then doing some computation (parsing) on it. At that point any event handlers attached to .ready will execute.
While the browser is parsing the DOM, it will keep track of any other resources it encounters (img, css, js, fonts) and start making additional requests for them. Once ALL those resources have been fetched, it will execute .load. EACH resource requires a totally new HTTP request, and a whole round trip to the server. If the resource is on another server (eg Google apis) it might require a DNS lookup too.
So in practical terms, .ready executes far sooner than .load, but you must use .load if any part of your script requires knowing some property of an resource that won't be available from just the HTML (eg, the dimensions of an image).
Ivan Kusakovic
12,197 PointsThanks Kevin, and thanks Casey. Great, now I understand all :) Cheers!