How to usethe “DOMContentLoaded” event in Javascript
In this approach, we use the DOMContentLoaded event and in this, we can use it with both the window and the document. Without waiting for stylesheets, graphics, or subframes to fully load, the DOMContentLoaded event fires once the basic HTML content has loaded and been parsed. So, it gives us the same type of functionality that is provided by $(document).ready() with jQuery.
Syntax:
document.addEventListener("DOMContentLoaded", function() {
// Code to be executed when the DOM is ready
});
// Or we can also use this event in this way
window.addEventListener("DOMContentLoaded", function() {
// Code to be executed when the DOM is ready
});
Example: This example demonstrates how we can implement the first approach which is using the DOMContentLoaded event with a document and with a window. Here, it is demonstrated how when we add the DOMContentLoaded event with the document, the script is executed when the DOM is loaded.
<!DOCTYPE html>
<html>
<head>
<script>
//When the DOMContentLoaded event is not
// used, the script is like this
// This will not be executed
document
.addEventListener("DOMContentLoaded",
function () {
// Code to be executed when the DOM is ready
let heading = document
.getElementById("myHeading");
heading.textContent = "DOM is ready!";
});
</script>
</head>
<body>
<h1 style="color: green;">
w3wiki
</h1>
<h3>
$(document).ready equivalent without jQuery
</h3>
<h1 id="myHeading">
Waiting for DOM...
</h1>
</body>
</html>
Output:
What is the Equivalent of $(document).ready in JavaScript ?
The jQuery function “$(document).ready()” is important for developers aiming to ensure seamless execution of code within their web applications. By using this function, code is executed only after the Document Object Model (DOM) has been fully loaded, thus preventing any potential errors stemming from incomplete page rendering. “$(document).ready()” facilitates the secure binding of events, interaction with DOM elements, and the execution of code dependent on the DOM. Its meticulous execution eliminates timing-related bugs, enhancing the reliability and stability of jQuery-powered applications.
When using jQuery is out of option and we want to get the same result without using jQuery, then we can use two approaches:
Table of Content
- Approach 1: Using the “DOMContentLoaded” event
- Approach 2: Deferred loading