document.ready and window.load

Many times we use “document.ready” and “window.load” in jquery, but very less people knows the exact difference between both of them. When I was a beginner, I didn’t know the difference. Many people asked me the difference.
The most common question , when you for an Interview is “How do you perform various actions as soon as the page loads on the client side in JavaScript?”
And the answer will be like – by using either “document.ready” or “window.load” sporadically. But (document).ready() and $(window).load() methods are very much differ in functioning. In this article, I will explain the major differences between $(document).ready() and $(window).load() methods.

 

document.ready

We can not change or manipulate safely until the document is “ready.” jQuery finds the state of readiness for you. Code written inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute. In this time only DOM is ready but images and iframes are still not loaded. It means document.ready starts just after the DOM is ready except images.

we call document.ready in many ways like below and they have same functionality and it is jQuery specific event.

 

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

 

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

 

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

 

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

 

window.load

Code written inside $( window ).load(function() { … }) will run once the entire page (images or iframes), not just the DOM, is ready. Means , when all the elements of page like images, css, iframes etc. including DOM is ready, then only window.load method will run.

 

$(window).load(function() {
/** this is come when complete page is fully loaded, including all frames, objects and images **/
});

 

window.onload

The onload event is a standard event in the DOM, while above two are specific to jQuery . this is also same functionality like $(window).load but window.onload is the built-in JavaScript event. It means no need of jquery library for calling window.onload method

 

function load() {
/** this is come when complete page is fully loaded, including all frames, objects and images **/
console.log(“load event detected!”);
}
window.onload = load;

 

Conclusion

Hope it will be useful. We are looking forward to hearing from you. We will be back with another more useful articles.

 

 

Ajay Malhotra

UI Developer & Designer

3 thoughts on “document.ready and window.load

  • June 13, 2016 at 10:16 am
    Permalink

    I gotta preferred this web web page it appears very valuable quite advantageous edcggaafccee

    Reply
  • June 13, 2016 at 10:17 am
    Permalink

    Good day! I know this is kind of off topic but I was wondering if you knew where I could find a captcha plugin for my comment form? I’m using the same blog platform as yours and I’m having problems finding one? Thanks a lot! aedeecaadebkcedd

    Reply
  • July 12, 2016 at 10:55 am
    Permalink

    That’s a skillful answer to a diuclffit question

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *