Home » Javascript JQuery Examples » Difference between window.onload and $(document).ready()

Difference between window.onload and $(document).ready()

When working with JavaScript in web development, you often encounter situations where you need to ensure that your code runs when the web page is fully loaded and ready for manipulation. Two commonly used methods for achieving this are window.onload and document.ready. While both seem similar at first glance, they serve slightly different purposes and have distinct use cases. In this article, we’ll explore the differences between window.onload and document.ready functions and provide examples to illustrate their usage.


Key Differences (window.onload vs document.ready)

  1. Timing: The main difference between the two is the timing of execution. window.onload waits for the entire page and all external resources to load, while document.ready (or DOMContentLoaded) fires as soon as the DOM is ready for manipulation.
  2. Dependency: Use window.onload when your code relies on external resources like images and stylesheets that need to be fully loaded. Use document.ready (or DOMContentLoaded) when your code doesn’t depend on external assets and can be executed once the DOM is ready.

window.onload – Javascript

The window.onload is the built-in JavaScript event that is fired when the entire web page, including all its content (images, stylesheets, scripts, etc.), has been fully loaded. It indicates that the DOM (Document Object Model) and all external resources have been completely processed. Any code specified within the window.onload event handler will run only after the entire page has loaded.

Here’s an example of how to use window.onload:

<!DOCTYPE html>
<html>
<head>
    <title>Window.onload Example</title>
</head>
<body>
    <h1>Hello, World!</h1>

    <script>
        window.onload = function() {
            // Code to be executed after the entire page has loaded
            alert('Window is fully loaded');
        };
    </script>
</body>
</html>

In this example, the JavaScript code within the window.onload event handler will display an alert only after the entire page, including the <h1> element, has finished loading.


document.ready – jQuery

On the other hand, the document.ready function is a concept primarily associated with the jQuery library, although similar functionality can be achieved with vanilla JavaScript using the DOMContentLoaded event. The document.ready (or DOMContentLoaded) event is triggered as soon as the DOM is ready for manipulation, even before external resources like images are fully loaded. This makes it ideal for executing code that doesn’t depend on external assets.

Here’s an example of how to use document.ready with jQuery:

<!DOCTYPE html>
<html>
<head>
    <title>Document.ready Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1>Hello, World!</h1>

    <script>
        $(document).ready(function() {
            // Code to be executed as soon as the DOM is ready
            alert('DOM is ready');
        });
    </script>
</body>
</html>

In this jQuery example, the alert will be displayed as soon as the DOM is ready, which means it will appear before any external resources have finished loading.


popular readings: