Document Ready

3 minutes
Share the link to this page
Copied
  Completed
A page can't be manipulated safely until the document is "ready." jQuery detects this state of readiness for you. Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute. Code included inside $( window ).on( "load", function() { ... }) will run once the entire page (images or iframes), not just the DOM, is ready.

Transcript

Hello, in this jQuery video, I am going to show you the document ready method. So the document ready method allows you to check when the web page has fully loaded in terms of the DOM. So that's the document object model. So you know all of the elements, all of the visual stuff has loaded, then you run the jQuery or JavaScript code. More specifically, the benefit of this is if you have some jQuery code or JavaScript code that manipulates some of the HTML, you can't manipulate what's not you know, what doesn't exist currently. So if you have a complex website, and your jQuery code or your JavaScript code might run faster than your web page can know depending on your internet connection, for example, and you know, and other factors as well, such as the server load, then the document ready for ensure that the webpage has fully loaded, and you can put it anywhere you have first script tag or a job.

File. And to do it is really simple, you just put dollar. So usually most things in jQuery or signified using dollar and then you put document. So this is just saying we are selecting the document for some modification or to do something with it. I'm going to cover selectors in more depth. So feel free to check out those videos.

Ready for when it's ready. We are going to show now, yeah, that's it. So this is the same when the document is ready, run this piece of code inside. So we could do console dot log. Ready, and if I reload and this will appear straight away because our website doesn't really have anything on it. So we will load pretty much instantly That's the document ready implementation, which just means any code here will only get executed once the website has fully loaded.

Therefore, you won't get any problems where the lack an element that you might modify or add content to be you load content from a database, add it into a table, but you'll ensure the table had been actually rendered and loaded first. That could be a shorthand version of this as well, that you can do for the for the dollar. you genuinely have one on the page. But I'll show you the shorthand version as well. And that's it. That's the short answer is I prefer the longhand version so I can see exactly what it's doing at a glance, we'll have a document ready.

That's how to see those two words, and I know what it is, whereas this might be a bit ambiguous. Apart from that, if I were to just delete that, for example. It still works the same well only both of them in and you can choose from the fourth Coppola Which one you want to use, plus the document ready method. If you have any questions, feel free to pop me a message and I look forward to seeing you in the next video.

Sign Up

Share

Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.