When a person starts programming or executing a function on page load, a common question occurs at that time, that which method we follow to execute the code on page load.
It is quite necessary that programmer needs to integrate some extra actions to the content on page load. Commonly we have two way to bind the content to execute
1. document.ready Method
2. window.load Method
We have these 2 way, but we need to understand the proper functioning of both the method.
Incorrect usage of the method may occur the possibilities of getting issues. So First we need to know the proper understanding and knowledge about both the method.
1. document.ready Method (jQuery)
“document.ready” is a page load method which executes when HTML-DOCUMENT is loaded and DOM is ready.
$(document).ready(function() {
// It's executes when HTML-Document is loaded and DOM is ready
alert("Web Document content is ready");
});
2. window.load Method (jQuery)
“window.load” event is executed when whole window content and window elements like- images, CSS, js etc. are loaded completely.
$(window).load(function() {
// executes when complete page data is fully loaded, including all images, objects and frames
alert("window content is fully loaded");
});
Now we have to understand that what are the main difference in both the method. Below We provide few points of difference.
|
Document.ready()
|
Window.load()
|
|
$(document).ready is an event which is executed when DOM structure is ready, so it’s execute when the document structure is ready.
|
$(window).load event is execute after the whole content or window element is loaded like -images, css, js, plugins and etc.
|
|
The “ready” event is specifically consist with the jQuery
|
On the Contrary, The “onload” event is a standard JavaScript event in the DOM
|
|
The main purpose of “ready” event is to execute the program as early as possible after the document has ready.
|
On the Contrary, “load” event is maintaining proper check and execute program after all the window content or element has load.
|
|
“Document.ready” is a specific jquery event, which direct or execute after the DOM.
|
Window.onload is a normal javascript event.
|
|
We can implement multiple ready events on the same web page.
|
On the contrary, we have to stick with 1 window.load() event, because the last onload event will overruled the previous onload events.
|
|
There are different way to call “document.ready()”. Such as:
1. $(function(){
});
-----------------------------------------------------------------
2. jQuery(document).ready(function(){
});
-----------------------------------------------------------------
3. $(document).ready(function(){
});
-----------------------------------------------------------------
4.$(document).on('ready', function(){
})
|
In window.load(), we have some limited way to call.
1. jQuery(window).load(function(){
});
-----------------------------------------------------------------------
2. $(window).load(function(){
});
-----------------------------------------------------------------------
3.$(document).on('ready', function(){
})
|
0 Comment(s)