Difference Between JavaScript window.onload And jQuery document.ready

The jQuery document ready event and the JavaScript window onload event both are used for web page initialization, but they are not exactly the same. To understand the similarities and differences between these two events, you should know the loading sequence of the HTML document.

1. HTML Document Loading Sequence.

HTML DOM document loading is done in order, it follows rendering order of web browser, and web browser rendering order is typically done in below steps.

  1. Parse HTML web page structure.
  2. Load external JavaScript and CSS style sheet files.
  3. Parse and execute JavaScript code.
  4. Construct the HTML DOM model tree.
  5. Load external image, audio or video files.
  6. Web page load complete.

2. Difference Between JavaScript window.onload And jQuery document.ready

The window.onload event must wait until all the content in the web page has been fully loaded before being executed. If a large multimedia file is included in a page, the page will appear, but because the page data is not fully loaded, the window.onload event cannot be triggered immediately.

Developers are used to put page initialization script in the window.onload event handler. But because the page data are not fully loaded in, this will lead to an issue that the web page DOM structure has been parsed out but the initialization scripts can not able to be executed, this may affect the usability of the page, for example hide some web elements in the initialization scripts.

But the document.ready event in jQuery is executed after the web page DOM structure is parsed, which means that it is executed before the external file is loaded, so that the document rendering and the script initialization executing are kept in sync.

READ :   jQuery Pseudo Class Selector Example

Conclusion:

  1. Window.onload event will be executed only when all page resources ( images, audio, video etc ) has been downloaded in the page.
  2. jQuery document.ready will be executed just after html dom tree has been parsed out. So it is far more earlier executed than window onload.

In summary, the jQuery document.ready event is triggered before the window.onload event, and if there do not has large external files to be loaded in the web document, their response time is essentially the same.

3. jQuery document.ready VS JavaScript window.onload Example.

difference between jquery document ready and javascript window onload event

In this example, it will print out the JavaScript window.onload and jQuery document.ready complete time in web browser console. Because this page contains an image which has big size and need more time to load, we can see the jQuery document.ready execute complete far behind JavaScript window.onload complete. Because jQuery do not need to wait for the image to load complete.

To see above result, just right click web page in google chrome browser and click Inspect menu item in the popup menu list then click Console tab.

onload-vs-ready.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Difference Between window.onload And jQuery document.ready</title>

    <script type="text/javascript" src="./lib/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">

        // This is the window onload event process function.
        window.onload = function () {

            var image = document.getElementById("example_image");

            image.hidden = false;

            // Get current date.
            var date = new Date();

            // Get current milli seconds.
            var milli_seconds = date.getMilliseconds();

            // Print out the milliseconds in console.
            console.log("Window onload complete time is : " + milli_seconds);
        }

        $(document).ready(function () {

            $("#example_image").hidden = true;

            var date = new Date();

            var milli_seconds = date.getMilliseconds();

            console.log("jQuery document ready complete time is : " + milli_seconds);
        })

    </script>
</head>
<body>
<image id="example_image" src="https://wallpapercave.com/beach-wallpapeqqrs"></image>
</body>
</html>
(Visited 14 times, 1 visits today)

Leave a Reply

Your email address will not be published. Required fields are marked *