Link for all dot net and sql server video tutorial playlists
Link for slides, code samples and text version of the video
In this video we will discuss
1. What is $(document).ready(function() in jquery and when to use it
2. Difference between $(window).load and $(document).ready
$(document).ready is a jQuery event. It fires as soon as the DOM is loaded and ready to be manipulated by script. This is the earliest point in the page load process where the script can safely access elements in the page’s html dom. This event is fired before all the images, css etc.. are fully loaded.
The following example works, because the jquery code that adds the event handler to the button is inside the ready() function, which ensures that the DOM is fully loaded before this piece of code is executed, so the JavaScript can find the button element in the DOM and adds the click event hanlder.
[html]
[head]
[title][/title]
[script src=”Scripts/jquery-1.11.2.js”][/script]
[script type=”text/javascript”]
$(document).ready(function () {
$(‘#button1’).click(function () {
alert(‘jQuery Tuorial’);
});
});
[/script]
[/head]
[body]
[input id=”button1″ type=”button” value=”Click Me” /]
[/body]
[/html]
In the following example, we have removed the ready() method. When you click the button now, you don’t get the alert. This is because the jQuery code is present before the button element, so by the time the jQuery code is executed the button element is not loaded into DOM.
[html]
[head]
[title][/title]
[script src=”Scripts/jquery-1.11.2.js”][/script]
[script type=”text/javascript”]
$(‘#button1’).click(function () {
alert(‘jQuery Tuorial’);
});
[/script]
[/head]
[body]
[input id=”button1″ type=”button” value=”Click Me” /]
[/body]
[/html]
To make this example work, you have 2 options
1. Place your jQuery code in $(document).ready function OR
2. Place your script at the bottom of the page just before the closing [/body] element
$(window).load event fires when the DOM and all the content on the page (images, css etc) is fully loaded. Since the window load event waits for images, css etc to be fully loaded, this event fires after ready event.
The following example proves the above point. When you run the page with the following script, notice that the alert in ready function is displayed before the alert in load function.
[script type=”text/javascript”]
$(window).load(function () {
alert(‘Window loaded’);
});
$(document).ready(function () {
alert(‘DOM Loaded and ready’);
});
[/script]
In most cases, the script can be run as soon as the DOM hierarchy has been fully constructed. So ready() is usually the best place to write your JavaScript code.
However, in your application there could be scenarios where you should be using $(window).load over $(document).ready. For example, let’s say we want to display the actual image dimensions (Height and Width). To get the actual image dimensions, we will have to wait until the image is fully loded, so the jQuery code to get the height and width should be in $(window).load event.
Example : If you use $(document).ready() instead of $(window).load() the height and width will be displayed as 0.
[html]
[head]
[title][/title]
[script src=”Scripts/jquery-1.11.2.js”][/script]
[script type=”text/javascript”]
$(window).load(function (){
$(‘#div1’).html(“Height = ” + $(‘#Image1’).height()
+ “[br/]” + “Width = ” + $(‘#Image1’).width())
});
[/script]
[/head]
[body]
[div id=”div1″][/div]
[img src=”Chrysanthemum.jpg” id=”Image1″ /]
[/body]
[/html]
