An important part of working with JavaScript is ensuring that your code runs at the right time. Things aren't as simple as putting your code at the bottom of your page and expecting everything to work once your page has loaded. Every now and then, you may have to add some extra code to ensure your code doesn't run before the page is ready. Sometimes, you may even have to put your code at the top of your page...like an animal!
There are many factors that affect what the "right time" really is to run your code, and in this tutorial, we're going to look at those factors and narrow down what you should do to a handful of guidelines.
Onwards!
The Things That Happen During Page Load
Let's start at the very beginning. You click on a link or press Enter after typing in a URL and, if the stars are aligned properly, your page loads. All of that seems pretty simple and takes up a very tiny sliver of time to complete from beginning to end:
In that short period of time between you wanting to load a page and your page loading, many relevant and interesting stuff happen that you need to know more about. One example of a relevant and interesting stuff that happens is that any code specified on the page will run. When exactly the code runs depends on a combination of the following things that all come alive at some point while your page is getting loaded:
- The DOMContentLoaded event
- The load Event
- The async attribute for script elements
- The defer attribute for script elements
- The location your scripts live in the DOM
Don't worry if you don't know what these things are. You'll learn (or re-learn) what all of these things do and how they impact when your code runs really soon. Before we get there, though, let's take a quick detour and look at the three stages of a page load.
Stage Numero Uno
The first stage is when your browser is about to start loading a new page:
At this stage, there isn't anything interesting going on. A request has been made to load a page, but nothing has been downloaded yet.
Stage Numero Dos
Things get a bit more exciting with the second stage where the raw markup and DOM of your page has been loaded and parsed:
The thing to note about this stage is that external resources like images and stylesheets have not been parsed. You only see the raw content specified by your page/document's markup.
Stage Numero Three
The final stage is where your page is fully loaded with any images, stylesheets, scripts, and other external resources making their way into what you see:
This is the stage where your browser's loading indicators stop animating, and this is also the stage you almost always find yourself in when interacting with your HTML document.
Now that you have a basic idea of the three stages your document goes through when loading content, let's move forward to the more interesting stuff. Keep these three stages at the tip of your fingers (or under your hat if you are wearing one while reading this), for we'll refer back to these stages a few times in the following sections.
The DOMContentLoaded and load Events
There are two events that represent the two importants milestones while your page loads. The DOMContentLoaded event fires at the end of Stage #2 when your page's DOM is fully parsed. The load event fires at the end of Stage #3 once your page has fully loaded. You can use these events to time when exactly you want your code to run.
Below is a snippet of these events in action:
Reference article https://www.kirupa.com/html5/running_your_code_at_the_right_time.htm