Vanilla JavaScript Equivalent of jQuery's $.ready(): How to Call a Function When Page/DOM is Ready

Disclaimer/Disclosure: Some of the content was synthetically produced using various Generative AI (artificial intelligence) tools; so, there may be inaccuracies or misleading information present in the video. Please consider this before relying on the content to make any decisions or take any actions etc. If you still have any concerns, please feel free to write them in a comment. Thank you.
---

Summary: Learn how to use vanilla JavaScript to call a function when the DOM is fully loaded and ready, as an alternative to jQuery's $(document).ready().
---

When working with JavaScript, it's often necessary to ensure that the DOM is fully loaded before running certain scripts. jQuery provides a convenient $(document).ready() function for this purpose. However, with modern JavaScript standards, you can achieve the same effect using vanilla JavaScript. This guide will show you how to execute a function when the DOM is ready using native JavaScript methods.

The jQuery Way

In jQuery, you can execute a function when the DOM is ready using:

[[See Video to Reveal this Text or Code Snippet]]

This method ensures that your code runs only after the DOM is fully loaded, avoiding issues with elements not being available when your script runs.

The Vanilla JavaScript Equivalent

Vanilla JavaScript provides multiple ways to achieve the same functionality without relying on jQuery. Here are a few methods you can use:

Using 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.

[[See Video to Reveal this Text or Code Snippet]]

This method is the most direct equivalent to jQuery's $(document).ready().

Using load Event

The load event is fired when the whole page has loaded, including all dependent resources such as stylesheets and images.

[[See Video to Reveal this Text or Code Snippet]]

This method ensures that all resources are fully loaded before executing your code, but it's not always necessary unless you need to interact with elements that depend on external resources.

Using a Self-Executing Function

You can also use an immediately invoked function expression (IIFE) to check the document's readiness state and execute your code accordingly.

[[See Video to Reveal this Text or Code Snippet]]

This approach ensures that your code runs immediately if the DOM is already loaded, or waits for the DOMContentLoaded event if it's not.

Choosing the Right Method

For most cases, using the DOMContentLoaded event is sufficient and the most straightforward way to ensure your JavaScript runs after the DOM is fully loaded. If you need to wait for all resources to be loaded, use the load event. The self-executing function provides a more robust solution, handling both scenarios where the DOM might already be loaded or not.

Conclusion

Transitioning from jQuery to vanilla JavaScript can be straightforward with the right techniques. By using the DOMContentLoaded event or other native methods, you can ensure your scripts run at the appropriate time, just like with jQuery's $(document).ready(). Embracing these native methods can reduce dependency on external libraries and lead to cleaner, more efficient code.