Difference between jQuery ready and window.onload functions

Posted By :Ravi Rose |10th January 2020

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




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
/**Its work when all the HTML loaded except images and DOM is ready **/
//your code





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" );




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.



<!-- 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 is a versatile Backend Developer with a strong expertise in WordPress technology. He is well-versed in the latest technologies like HTML, CSS, Bootstrap, JS, WordPress, PHP, and ReactJS. Ravi has contributed to multiple internal and client projects such as TripCongo, Transleqo, Hydroleap, OodlesAI, and Nokenchain. He has also demonstrated his capabilities in various other areas such as project management, requirement analysis, client communication, project execution, and team management. With his wide range of skills and experience, he can deliver exceptional results and add value to any organization he works with.

Request For Proposal

[contact-form-7 404 "Not Found"]

Ready to innovate ? Let's get in touch

Chat With Us