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.
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.
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.
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 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!!!
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
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!!!
This comment has been removed by a blog administrator.
ReplyDelete