This blog will demonstrate the vanilla JavaScript equivalent of the jQuery $.ready() method.
Vanilla JavaScript Equivalent of jQuery’s $.ready()
The vanilla JavaScript equivalent of jQuery’s $.ready() function is the “document.addEventListener(“DOMContentLoaded”, function() { … });” function.
How to Use the “DOMContentLoaded” Event of Vanilla JavaScript?
“DOMContentLoaded” is an event in JavaScript that is fired or triggered without having to wait for stylesheets, graphics, or subframes to load completely before parsing the basic HTML content.
Syntax
In this syntax:
- “event” is the first parameter, which can be any valid JavaScript event.
- “function” is the main body executed when the event is triggered.
- “useCapture” is an optional parameter.
Example
In this example script is executed when the DOM is fully loaded using vanilla JavaScript.
To do so, we will create headings in an HTML file that will display on the page after loading the page:
<h5>DOM is fully loaded</h5>
In “<script>” tag, display an alert message while loading the page and print the message on the console when the page is loaded:
document.addEventListener('DOMContentLoaded', function(){
console.log('DOM Content is loaded');
})
alert('DOM is loading');
</script>
According to the above code snippet:
- Invoke the “addEventListener()” method with the event ”DOMContentLoaded” and a function that will print a message after loading the entire page.
- The alert dialog box is shown before loading the page.
It can be observed that the content has been displayed when the DOM is fully loaded:
How to Use jQuery $ready() Function?
The “$.ready()” function in jQuery is used to run a function or a block of code as soon as the DOM is ready/available for manipulation. This means that the function will be executed as soon as the page has finished loading and parsing the HTML but before all other resources, such as images and stylesheets, have finished loading.
Syntax
For the “ready()” function in jQuery, use the below-given syntax:
In this syntax, the “body” is executed after the entire page is completely loaded.
Example
In the following example, the specific HTML document will hide the element on the button click after loading the entire page.
For using jQuery in your code, it is important to first load the library:
Add some content in HTML file that will display on the page after loading the DOM:
<h5>DOM is fully loaded</h5>
<button>Hide the Element</button>
In the <script> tag, first show an alert message while loading the DOM. Then, after displaying content, hide the heading while clicking on the button:
alert('DOM is loading')
$(document).ready(function(){
$("button").click(function(){
$("h5").slideToggle();
});
});
</script>
It can be seen that the content has been loaded on the page after loading the DOM element and the heading will hide on the button click:
That was all about the equivalent of jQuery $ready() function in Vanilla JavaScript.
Conclusion
The “DOMContentLoaded” event is equivalent to jQuery’s “$.ready()” method. The “DOMContentLoaded” and the “$.ready()” will fire before the load event. This means that you can use it to execute code as soon as the DOM is ready without waiting for all resources to be loaded. This blog demonstrated the vanilla JavaScript equivalent of the jQuery $.ready() method.
