Difference between jQuery ready and window.onload functions

Posted By :Ravi Rose |10th January 2020

$(document).ready vs $(window).load vs window.onload

 

$(document).ready

 

when we work with jQuery Much time we use ` $(document).ready `.This code is written when we execute our code when DOM is ready** except images**. If our web page has images then it will not wait for loading of images and call and in one page we can apply many document.ready and it calls one by one as the coming sequence. we call document.ready in many ways like below and they have the same functionality and it is a jQuery specific event.

 

//call type 1
$(document).ready(function() {
/**Its work when all the HTML loaded except images and DOM is ready **/
// your code
});

//call type 2
$(function() {
/**Its work when all the HTML loaded except images and DOM is ready **/
//your code
});

//call type 3
$(document).on('ready', function(){
/**Its work when all the HTML loaded except images and DOM is ready **/
//your code
});

//call type 4
jQuery(document).ready(function(){
/**Its work when all the HTML loaded except images and DOM is ready **/
//your code
});

 

 

$(window).load

 

And when we talk about the '$(window).load' then it is work when all DOM is ready including images so it is useful when on document load we want to work with images (calculation of image dimensions) and it is also the jQuery specific event. If our web page has images then it will wait for loading of images and then it calls. 

 

$(window).load(function() {

/** Its come when the complete page is fully loaded, including all frames, images and objects **/

});

 

and other things don’t confuse with window load event with the jQuery ajax load method


// jQuery ajax load method

$("#elementid").load( "data.html" );


 

 window.onload

 

The window.onload event is a standard event in the DOM, while the above two are specific to jQuery. This is also having same functionality like the $(window).load but the window.onload is the built-in JavaScript event. The window.onload event occurs when an object has been loaded. Like if we take an example of an image and call window.onload event in image tag then it will call when the image will load. Generally we use it in body tag.

 

How its call in HTML and JavaScript

 

In the HTML

<element onload="myFunction"></element>

 

In the JS

object.onload=function(){/**your desire code**/};// here object can be window,body and etc
1)  Here the alert  “call on body load” is call  immediately after body has been loaded.

 

In HTML

<!-- on body window.onload call myFunction -->
<body onload="myFunction()">


In JavaScript

// myFunction() which will call onthe  body load
function myFunction(){
   alert("call on the body load");
}


if we take an example related to an image window.onload then it will look like below

 

2)  Here the alert “call on image load” call immediately after the image loaded.

 

In the HTML

<!-- on image window.onload call myImageFunction() -->
<img src="image path src" onload="myImageFunction()">

 

In the JavaScript

// myFunction() which will be call on image load
function myImageFunction(){
   alert("call on image load");
}


About Author

Ravi Rose

Ravi Rose is a good learner. He is familiar with HTML,CSS,JavaScript,Wordpress and Php.His hobby is to stay Fit and listening to music.

Request For Proposal

Sending message..

Ready to innovate ? Let's get in touch


Notice: Undefined index: HTTP_REFERER in /var/html/www/AI/wp-content/themes/oxides-child/functions.php on line 283

Notice: Undefined index: HTTP_REFERER in /var/html/www/AI/wp-content/themes/oxides-child/functions.php on line 283

Notice: Undefined index: HTTP_REFERER in /var/html/www/AI/wp-content/themes/oxides-child/functions.php on line 283

Notice: Undefined index: HTTP_REFERER in /var/html/www/AI/wp-content/themes/oxides-child/functions.php on line 283

Chat With Us