When working with JavaScript and the Document Object Model (DOM), you might want your script to run only when the DOM has loaded.

You can do this using the $(document).ready() method in jQuery, or the DOMContentLoaded event in vanilla JavaScript.

In this article, you'll learn how to make your JavaScript code run only when the DOM has loaded using jQuery and vanilla JavaScript.

How to Use the $(document).ready() Method in jQuery

Before JavaScript runs in the browser, it waits for the contents of the document to load. This includes stylesheets, images, and so on.

As a convention, placing the script element just before the closing body tag makes the script wait for the rest of the document to load before running.

We also can make this process faster in jQuery by using the $(document).ready() method. The $(document).ready() method only waits for the DOM to load, it doesn't wait for stylesheets, images, and iframes.

Here's an example:

$(document).ready(function () {
  console.log("Hello World!");
});

In the code above, the $(document).ready() method will only run after the DOM has loaded. So you'll only see "Hello World!" in the console after the $(document).ready() method has started running.

In summary, you can write all your jQuery code inside the $(document).ready() method. This way, your code will wait for the DOM to be loaded before running.

How to Use the DOMContentLoaded Event in JavaScript

Just like jQuery's $(document).ready() method, the DOMContentLoaded event fires once the DOM has loaded – it doesn't wait for stylesheets and images.

Here's how to use the DOMContentLoaded event:

document.addEventListener("DOMContentLoaded", () => {
  console.log("Hello World!");
});

Once the DOM has loaded, the DOMContentLoaded event will detect it and run.

You should use the DOMContentLoaded  event when:

  • You have certain functionalities in your webpage that should fire immediately without waiting for the rest of the page content.
  • You have a script tag placed within the head element.

Summary

In this article, we talked about the$(document).ready() method in jQuery, and the DOMContentLoaded event in vanilla JavaScript.

We use them to execute JavaScript code when the DOM has loaded.

The interesting part of these functionalities is that they let JavaScript code run without waiting for images and stylesheets to load completely in a web page.

Happy coding!