Window onload Vs Document ready jQuery

This has been a very important question in JavaScript world and is been asked from web developers of all ages. Whether you are a beginner in web development or experienced one, you should be able to answer this question. Whats the difference between window.load event & document ready event of jQuery? If you don't know the answer, this article is helpful for you. So let's get started.


jquery ready event vs window.onload event



What Is window.onload Event?

So while developing a web application, we have HTML & JavaScript. And when we say HTML, it has structural elements like div, section and apart from that we have img, iframe, object elements.
So window.onload event is fired when everything present in the HTML(images and other stuff) and scripts are loaded onto the browser. 

All the browsers support this event, and works the same way. This event might take long time if there are heavy images present into your HTML as this event will be fired when all the images are loaded, whatever time they take.

Shown below is an example to show how to use window.onload

window.onload = function(){
//Code that you want to execute
}

Point to be noted here is that, inside your JavaScript you can have only one window.onload event. If you try to write it again some where in your code, the last one would be considered and other impementations would be overridden.

What Is $(document).ready Event?


When we are using jQuery in our web application, we have its few cross browser compatible events available for us. And .ready is one of them. It is called when DOM(Document Object Model) is ready, which means all the script tags and structural HTML element are loaded onto browser.

This event doesn't wait for images or iframes to load. It just ensures us that the DOM is safe for manipulation. We can bind jQuery events, append or remove elements and do anything which we want.
We can have as many .ready events as we want. The code inside those events will be executed in the order the events are written. Shown below is the syntax for .ready event.

$(document).ready(function(){
//Code that you want to execute
});


We pass anonymous function inside ready event. For ready event, jQuery relies on DOMContentLoaded event being raised by most of the browsers. However, jQuery is cross-browser supported so, it makes sure thati f the DOM becomes ready and the browser fires DOMContentLoaded before the code calls .ready( handler ), the function handler will still be executed.

So Which Event Is Called First: ready or onload? 


So after the above event descriptions, we can easily understand that $(document).ready is called before the window.onload event. If our HTML doesn't have heavy images, still the ready event will be called first and onload would be called immediately after that.

These two events are very common in JavaScript web development and commonly asked interview question. So we hope we gave you a brief and crisp idea about these events.

Stay tuned to CheezyCode for more such articles.

Happy Learning!!!

Comments

  1. The great information that you shared. It will help all of them. Thanks for posting. Keep maintain the updates
    PHP Development Companies in Chennai
    |
    PHP Development Company
    |
    PHP web development services
    |

    ReplyDelete
  2. The article was up to the point and described the information very effectively. Thanks to blog author for wonderful and informative post.
    website development Pakistan

    ReplyDelete
  3. Financial sector has undergone drastic technological shifts in a comparatively short span of time. The shifts have been incorporated because of Growing Technology, Customer Demands, etc. Take a glance over some of the legacy Cross-platform App Development Company. These are so dynamic and efficient that it will cost you less time, more functionality, good output returns.

    ReplyDelete
  4. The market is flooded with mobile applications. One with the best user-interface and good performance wins the race. Similarly, the market has a lot of technologies for mobile app creations, but some of them are highly in demand. Out of them, one rising star is Flutter. The Flutter app development company in India has begun to hire Flutter programmers and are providing advanced knowledge about the relevant technology. Flutter framework made the developers of the world go gaga around it. The best feature observed is Single codebase, i.e., using a single code, one can develop an app in both Android and iOS.

    ReplyDelete
  5. Getting inspired by globally successful apps like Facebook, Instagram, Airbnb, Bloomberg, etc. we recommend our clients to develop mobile apps using React Native. If you are looking for a secure, robust and reliable mobile app solution for your business or enterprise, hire React Native developers to avail industry leading React Native development services. React Native is an amazing mobile app development framework from Facebook for cross-platform applications development. It allows you to build mobile apps by using JavaScript. Other than this, you can use a single set of libraries and components for app development for both iOS and Android.

    ReplyDelete

Post a Comment

Hey there, liked our post. Let us know.

Please don't put promotional links. It doesn't look nice :)

Popular posts from this blog

Just Maths - Views, View Groups and Layouts

Create Android Apps - Getting Started

Just Maths - Android Activities and Layouts