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");
}
Ready to innovate ? Let's get in touch
