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

Pranay Rana

Pranay Rana

Jan 16, 2014

    The ready event occurs after the HTML document has been loaded, while the onload event occurs later, when all content (e.g. images) also has been loaded.The onload event is a standard event in the DOM, while the ready event is specific to jQuery. The purpose of the ready event is that it should occur as early as possible after the document has loaded, so that code that adds funcionality to the elements in the page doesn't have to wait for all content to load.

    Munesh Sharma
    April 14, 2014

    Code in this method get executed when DOM tree is ready.
    But fact is code in this method executed when DOM tree is ready and All the external resource are load like Images, Flash vidoe or quicktime video.
    Loading of the external resources deplay execution of the actual script when page get displayed.

    Code in this method get executed once DOM tree loading is done.
    That means its not wait for the external resource get loaded. And run the javascript code which is in function.

    So if you use Windows.onload than end user have to wait to see expected behaviour till DOM tree and external resouce get loaded by the browser. Where as in case of $(document).redy script get exeucuted once Dom tree loaded by browser.

    Pranay Rana
    January 16, 2014

    window.onload() () - The load event fires when all the content on your page fully loaded including the DOM (document object model) content, asynchronous javascript, frames and images, you can also use body onload= both are same just window.onload = func(){} and are different ways of using the same event.$(window).load(function () {alert("window load complete"); });window.onload = function () {alert("window load complete"); }$document.ready() - Jquery $document.ready function event executes a bit earlier than window.onload and called once the DOM(Document object model) is loaded on your page. DOM means all the html tags/script I.e.(anchor tag, table, div tag, paragraph tag etc..). It will not wait for the images, frames to get fully load. It means that it is the earliest stage in page load process.$(document).ready(function () {alert("document is ready.");});The main difference is that $document.ready() event gets called as soon as your DOM is loaded. It does not wait for the contents to get loaded fully. For example, there are very heavy images on any web page and takes time to load. If you have used window.onload then it will wait until all your images are loaded fully, hence it slows down the execution. On the other side, $document.ready() does not wait for elements to get loaded.$document.ready() , window.onload() inside update panel (partial postback) in asp.net Since we know, in asp.net update panel gets partially postback (use xmlhttprequest object) to the server. Hence if you are using the $document.ready() or window.onload methods in your web page then you should be very careful to use these methods.$document.ready() is not called in every partial postback. $document.ready() is called only one time i.e. during first time of page loading. if you want to get call back of every partial postback then you have to use pageLoad() method which is the part of scriptmanager generated script means if you want to use pageLoad() method then you need to use asp.net scriptmanager in the page.

    Md. Raskinur Rashid
    January 20, 2015