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
  6. Change is the only constant. This applies in your professional life as well as personal life. Up-scaling yourself is a need nowadays, the reason is pretty simple, technology is evolving very quickly. I have listed top 10 trending technologies, which is expected to acquire a huge market in 2020.

    1. AI (Artificial Intelligence)
    2. Blockchain
    3. Augmented Reality and Virtual Reality
    4. Cognitive Cloud Computing
    5. Angular and React
    6. DevOps
    7. IoT (Internet of Things)
    8. Intelligent Apps (I – Apps)
    9. Big Data
    10. RPA (Robotic Process Automation)

    ReplyDelete
  7. Flutter is one of the top cross-platform framework for app development and allows us to build Android and iOS apps together. The overall development cost is reduced by using Flutter app development and it also provide ease to developers to develop cross-platform apps. Flutter is Google’s new open source technology for creating native Android and iOS apps with a single codebase. Unlike other popular solutions, Flutter is not a framework; it’s a complete SDK – software development kit – which already contains everything you will need to build cross-platform applications.

    ReplyDelete
  8. Flutter Development Services help businesses and organizations to optimize their IT landscape with high-performing mobile apps. When compared to other hybrid frameworks, Flutter is robust and reactive with widgets and tools that allow the building and deployment of UI with animations and a single codebase that works for both iOS and Android platforms. Google Flutter is undoubtedly the most versatile mobile app development framework. The unmatched features of Flutter help businesses to expand their application development horizons. Flutter stays true to the word ‘writing once and running it everywhere’, such that application development on iOS and Android have become fairly easy with the revolutionary framework.

    ReplyDelete
  9. Wow, what great information. I am sure the info on your blog will help others.

    Mobile App Ideas
    Web Development
    Dating App Development Company

    ReplyDelete
  10. The way your industry interacts with customers, partners and employees will change as virtual reality (VR) and augmented reality (AR) headsets gain widespread adoption. Augmented Reality and Virtual Reality development for the business plays important role in many industries and it can be a game changer for any business like eCommerce experiences, which let your customers try on clothes virtually or preview new furniture within their homes. Since AR completely transformed the existing tedious methods. Due to this, the even big player has employed augmented reality to do something unique. AR can help any business come up with unique marketing applications that also train your work-force even potential is huge but the limitations are really minimal. Virtual Reality, on the other hand, is the is a technology with the use of exciting software which is pretty much closer to the real world. All these 3D images and videos which we see in our daily life are nothing but just a part of these technologies.

    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