Pure Javascript Equivalent Of Jquerys Ready How To Call A Function When The Page Dom Is Ready For It Duplicate

If you're a web developer looking for a way to call a function when the page's DOM is ready without using jQuery, then you're in the right place. jQuery's `$(document).ready()` function has been a go-to method for many developers, but did you know that you can achieve the same result using pure JavaScript? In this article, we'll walk you through the steps to create the pure JavaScript equivalent of jQuery's `ready()` function.

First off, let's understand what jQuery's `$(document).ready()` function does. It allows you to execute a function when the DOM is fully loaded and ready for manipulation. To achieve a similar effect in pure JavaScript, we can utilize the `DOMContentLoaded` event.

Here's how you can create the pure JavaScript equivalent of jQuery's `ready()` function:

document.addEventListener('DOMContentLoaded', function() {
  // Code to execute when the DOM is ready
});

In the code snippet above, we use the `addEventListener()` method to listen for the `DOMContentLoaded` event on the `document` object. This event is fired when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.

When the `DOMContentLoaded` event is triggered, the anonymous function inside the event listener will be executed, allowing you to perform actions on the DOM elements safely.

It's important to note that by using this pure JavaScript approach, you can achieve the same outcome as jQuery's `$(document).ready()` function without the need to include the jQuery library in your project. This can help improve the performance of your web pages by reducing unnecessary dependencies.

Additionally, if you need to support older browsers that may not fully support the `DOMContentLoaded` event, you can use a fallback approach by checking if the document is already interactive or complete:

if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', function() {
    // Code to execute when the DOM is ready
  });
} else {
  // Code to execute when the DOM is already interactive or complete
}

In this fallback scenario, we check the `document.readyState` property to determine if the document is still loading. If it is, we add an event listener for `DOMContentLoaded`. If the document is already interactive or complete, we can execute the code immediately.

By using this pure JavaScript equivalent of jQuery's `ready()` function, you can enhance the overall performance and maintainability of your web projects while ensuring a seamless user experience. So, the next time you need to call a function when the page's DOM is ready, remember that you have a reliable alternative to jQuery at your disposal. Happy coding!