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 the rendering order of the web browser, and the web browser rendering order is typically done in the below steps.
- Parse HTML web page structure.
- Load external JavaScript and CSS style sheet files.
- Parse and execute JavaScript code.
- Construct the HTML DOM model tree.
- Load external image, audio, or video files.
- Web page load complete.
2. Difference Between JavaScript window.onload And jQuery document.ready
- The window.onload event must wait until all the content on the web page has been fully loaded before being executed.
- If there is a large multimedia file is included on 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 putting page initialization scripts 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.
- Conclusion.
- Window.onload event will be executed only when all page resources ( images, audio, video, etc ) have been downloaded to the page.
- jQuery document.ready will be executed just after the Html dom tree has been parsed out. So it is far 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.
- In this example, it will print out the JavaScript window.onload and jQuery document.ready complete time in the web browser console.
- Because this page contains an image that has a big size and needs more time to load, we can see the jQuery document.ready execute complete far behind JavaScript window.onload complete. Because jQuery does not need to wait for the image to load completely.
- To see the above result, just right-click the web page in the google chrome browser and click the Inspect menu item in the popup menu list then click the Console tab to see the below result.
jQuery document ready complete time is : 16 Window onload complete time is : 930
- Below is the example Html source code.
- 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>
