Introduction
Throughout internet growth, you will have had instances the place your JavaScript was executing too early, which may result in errors or sudden conduct as a result of the HTML components that your script is making an attempt to make use of might not be totally loaded but.
On this Byte, we’ll discover the best way to make JavaScript execute after the web page has totally loaded, making certain all components are prepared for interplay.
Why Execute JavaScript After Web page Load?
When a webpage masses, it is not an instantaneous course of. The browser parses the HTML, creates a Doc Object Mannequin (DOM), after which begins to render the web page. In case your JavaScript code runs earlier than the DOM is totally constructed, it could attempt to manipulate components that do not exist but, resulting in errors. By executing JavaScript after the web page load, you make sure that all of the web page components can be found in your script to work together with.
Notice: It is vital to know that JavaScript execution can block the rendering of the web page. Because of this in case you have a heavy script operating earlier than your web page masses, it will probably have an effect on the web page load time and the person expertise.
Easy methods to Execute JavaScript After Web page Load
There are a number of methods to execute JavaScript after the web page has loaded. We’ll cowl the DOMContentLoaded occasion on this part, however there are additionally different strategies just like the load occasion and jQuery’s $(doc).prepared technique.
Utilizing the “DOMContentLoaded” Occasion
The DOMContentLoaded occasion is fired when the preliminary HTML doc has been utterly loaded and parsed, with out ready for stylesheets, photos, and subframes to complete loading. You may arrange an occasion listener for this occasion, and your JavaScript code inside this occasion listener will execute after the DOM is prepared.
This is an instance:
doc.addEventListener('DOMContentLoaded', perform() {
// Your code right here
console.log('DOM totally loaded and parsed');
});
Once you run this code, you will see the message “DOM totally loaded and parsed” in your console after the DOM has totally loaded.
Notice: The DOMContentLoaded occasion is a really helpful software, however remember that it is not supported in Web Explorer 8 and earlier variations.
Utilizing the “load” Occasion
The “load” occasion is a normal DOM occasion that fires when the complete webpage has completed loading. This contains all belongings like photos, scripts, and CSS information. This is how you need to use it:
window.addEventListener('load', (occasion) => {
console.log('The web page has totally loaded');
// Your code right here
});
When the web page has totally loaded, the console will log ‘The web page has totally loaded’, after which your code will execute.
Notice: The “load” occasion can take a bit longer to fireside in comparison with the ‘DOMContentLoaded’ occasion, as a result of it waits for all belongings to load. In case your script would not rely on different belongings, you would possibly need to use “DOMContentLoaded” as an alternative for a sooner response time.
Utilizing jQuery’s ‘$(doc).prepared’ Methodology
For those who’re utilizing jQuery, you need to use the $(doc).prepared() technique. This technique will get known as as quickly because the DOM is prepared, which will be sooner than the ‘load’ occasion if there are numerous giant belongings to load.
$(doc).prepared(perform() {
console.log('The DOM is prepared');
// Your code right here
});
With this technique, the console will log ‘The DOM is prepared’, after which your code will execute.
Notice: jQuery is a well-liked library that simplifies many elements of JavaScript, nevertheless it’s not at all times needed. For those who’re solely utilizing jQuery for the $(doc).prepared() technique, you would possibly need to think about using plain JavaScript as an alternative to scale back your mission’s dependencies.
Evaluating the Completely different Strategies
Every of those strategies has its personal use instances. The “DOMContentLoaded” occasion is helpful for executing JavaScript as quickly because the HTML is parsed, which will be considerably sooner than the “load” occasion in case your web page has giant belongings. Nevertheless, in case your JavaScript depends upon these belongings, you will want to make use of the “load” occasion to make sure they’re totally loaded earlier than your script runs.
However, jQuery’s $(doc).prepared() technique is an effective selection should you’re already utilizing jQuery and desire a easy, cross-browser suitable approach to execute JavaScript after the DOM is prepared. However remember that jQuery will be overkill if that is all you are utilizing it for.
Conclusion
Executing JavaScript after the web page has loaded is a typical requirement in internet growth. The tactic you select to perform this depends upon your particular wants and the libraries you are utilizing. Whether or not you select the ‘DOMContentLoaded’ occasion, the ‘load’ occasion, or jQuery’s $(doc).prepared() technique, every has its personal benefits and trade-offs. Understanding these may also help you make an knowledgeable resolution in your mission.
