Document ready is an event that indicates that the DOM of the page is completely ready so that you can handle it without worrying if some parts of the DOM have not been loaded. This event fires before any image or video get rendered into the website but after the whole DOM is ready. It is often used when removing a preloader after the page has fully loaded.

Refer to the following code snippet to learn how to use document ready in jQuery and vanilla JavaScript:

$(document).ready(function() { 
    // DOM is fully loaded. Write other codes.
    alert('Hello from jQuery');
});

// Check if the document is ready using vanilla JavaScript
let documentReadyCallback = () => {
   // DOM is fully loaded. Write other codes.
    alert('Hello from JavaScript');
};

if (document.readyState === "complete" || (document.readyState !== "loading" && !document.documentElement.doScroll)) {
    documentReadyCallback();
} else {
    document.addEventListener("DOMContentLoaded", documentReadyCallback);
}