$(Document).Ready Equivalent Without Jquery

When working with JavaScript, it is common to use the jQuery library for various tasks. One of the most commonly used jQuery functions is $(document).ready(), which ensures that the code inside the function is executed only after the DOM is fully loaded.

However, there may be situations where you want to achieve the same functionality without using jQuery. In this blog post, we will explore two alternative solutions to achieve the same result.

Solution 1: Using the DOMContentLoaded Event

The DOMContentLoaded event is fired when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading. This event is supported by all modern browsers.

Here is an example of how you can use the DOMContentLoaded event to achieve the equivalent of $(document).ready():

document.addEventListener("DOMContentLoaded", function() {
  // Code to be executed after the DOM is ready
});

This code adds an event listener to the document object, listening for the DOMContentLoaded event. When the event is fired, the provided callback function is executed.

Solution 2: Using the window.onload Event

The window.onload event is fired when the entire page (including all external resources such as images and stylesheets) has finished loading. This event is supported by all browsers.

Here is an example of how you can use the window.onload event to achieve the equivalent of $(document).ready():

window.onload = function() {
  // Code to be executed after the entire page is loaded
};

This code assigns a function to the window.onload event. When the event is fired, the assigned function is executed.

Conclusion

Although using jQuery’s $(document).ready() is a convenient way to ensure that your JavaScript code is executed only after the DOM is fully loaded, there are alternative solutions available for those who prefer not to use jQuery.

By using either the DOMContentLoaded event or the window.onload event, you can achieve the same result without relying on jQuery. Choose the solution that best fits your needs and preferences.

Feel free to copy and use the code snippets provided above in your own projects. Happy coding!