HomeОбразованиеRelated VideosMore From: kudvenkat

What is $document ready function in jquery

696 ratings | 228632 views
Link for all dot net and sql server video tutorial playlists http://www.youtube.com/user/kudvenkat/playlists Link for slides, code samples and text version of the video http://csharp-video-tutorials.blogspot.com/2015/03/what-is-documentreadyfunction-in-jquery.html 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]
Html code for embedding videos on your blog
Text Comments (91)
Rohit Roy (11 days ago)
what is the different of [script type="text/javascript"] [/script] and [script] [/script] what is the different of 'single quotation' and "double quotation"
Hamza Ashraf (3 months ago)
now $(document).ready(function(){ ....................... }) take place of $(window).on("load",function(){ ....................... }) function so always try to use $(document).ready function instead of $(window).on("load",function(){})
anoop ashware (6 months ago)
Thank you for share to basic knowledge between $(document). ready and $(window).load ......
Deepali Singh (8 months ago)
Thank you Sir :)
Shubham Mehetre (10 months ago)
Now window 'load' method has been removed from latest version of jQuery use 'on 'behalf of load ex : $(window).on("load",function() { alert('Window'); });
Anita Nayak (11 months ago)
i'm getting null values of height and width.. :(
jay dee (11 months ago)
$(window).on('load',function(){ $('#div1').html("Height = " + $('#img1').height() + "</br>" + "width = " + $('#img1').width()); });
jay dee (11 months ago)
try this syntax: $(window).on('load',function(){ alert("window has loaded"); });
Liam Harris (11 months ago)
Hi, i need help please. <script src="jquery-3.3.1.js"></script> <script src="scripts/scripts.js"></script> </body> scripts: $(document).ready(function () { 'use strict'; alert("Jquery loaded"); }); JSlint: i am just getting these errors when i save my script file. $ was used before it was defined Expected 'use strict' at column 5 unexpected(space) 'alert' was used before it was defined ESlint: Error: $ is not defined[no-undef] Error: 'document' is not defined.[no-undef] Error: 'alert' is not defined[no-undef] fairly new to jQuery. but dabbled init before and never got these issues.
Nikhil B Singh (11 months ago)
I don't get to see any output when I run the same mentioned script in a same webpage. my code is as below. Please, someone point out the error in it: <!DOCTYPE HTML> <HTML> <HEAD> <script src="jquery-3.3.1.min.js" /> <script type="text/javascript"> $(window).on(function(){ alert('window loaded'); }); $(document).ready(function(){ alert('DOM loaded'); }); </script> <title> jquery <title> </HEAD> <BODY> text goes here </BODY> </HTML> folder structure: jqeryfile, run html
Afzal Bazeer (11 months ago)
i am a fan of your tutorials sir. Your way of explanations, comparisons, presentations are wonderful sir. Hope you will upload tutorials on all the upcoming new technologies. Thankyou
Navya Sindhu (1 year ago)
While I am using jQuery 3.x, I see that the output sequence is window loaded followed by DOM loaded, why is this happening?
1986nesha (1 year ago)
Mr Venkat, great videos as always! Here is a question, when i run the code like this: <script type="text/javascript"> $(window).on('load', function(){ alert('Window loaded'); }); $(document).ready(function(){ alert('DOM loaded'); }); </script> window actually loads before the DOM. Is this how it works because it is jQuery 3?
Varshitha A (1 year ago)
Even i found the same issue..Is it how it works in Jquery 3?
madhu podapati (1 year ago)
Excellent tutorials : )
pankaj jain (1 year ago)
Hii sir...can we get the all code and cource content in hardcopy .
Ayesha Nazir (1 year ago)
Thank you so much..
549osama (1 year ago)
you have expalined it in a very nice and simple way, Thank you :)
Ahmet Yaman (1 year ago)
Thank you Sir
DIPAK BHAI (1 year ago)
plese help me
DIPAK BHAI (1 year ago)
sir windo .load function is not woking
Ward Kempster (1 year ago)
Are you using jQuery 3.x? As noted in the comment by "PHP Tuts" below, the "load"" method is deprecated in jQuery 3.x -- you need to use the "on" method as they describe below (see the jQuery documentation).
PHP Tuts (1 year ago)
When ur using jQuery 3.x version then use .on() method instead of load() because load is now deprecated. $(window).on('load', function(){......}
Sudarshan Neupane (1 year ago)
thanks, for this comment, I trying trying to find why it isn't running
Ullas Gokarnkar (2 years ago)
Sir please upload SharePoint tutorials
Benji Yamamoto (2 years ago)
TY Bro
Hasan Butt (2 years ago)
very useful videos Sir Venkat hats off :)
HISTORY WORLD (2 years ago)
now it's possible to document.ready not needed window.load in jquery 3.1.1
Physics Advanced level (1 month ago)
i have the same problem window.load does not work in jquery 3.1.1
Md Ziarul (2 years ago)
thank's for this tutorial. very very very nice video
kudvenkat (2 years ago)
Thank you very much for taking time to give feedback. This means a lot. I am very glad you found the videos useful. I have organised all the Dot Net & SQL Server videos in to playlists, which could be useful to you https://www.youtube.com/user/kudvenkat/playlists?view=1&sort=dd If you need DVDs or to download all the videos for offline viewing please visit http://www.pragimtech.com/kudvenkat_dvd.aspx Slides and Text Version of the videos can be found on my blog http://csharp-video-tutorials.blogspot.com Tips to effectively use my youtube channel. https://www.youtube.com/watch?v=y780MwhY70s If you want to receive email alerts, when new videos are uploaded, please subscribe to my youtube channel. http://www.youtube.com/subscription_center?add_user=kudvenkat If you like these videos, please click on the THUMBS UP button below the video. May I ask you for a favor. I want these tutorials to be helpful for as many people as possible. Please share the link with your friends and family who you think would also benefit from them. Good Luck Venkat
Return Zero (2 years ago)
in jQuery 3.1.1 the windows fire before DOM :(
faruk ahmad (2 years ago)
if you use jquery version jquery-3.1.1.min.js don't work this function your need $(window).on('load', function(){ $('#div1').html("Height = "+ $('#Image1').height() + "<br>" + "Width = " + $('#Image1').width()); });
dfdsfsdfsdfasdfdsfads (2 years ago)
in jquery 3 we have to use: $(window).on("load",function(){}(; but $(document).ready() still works with the images - HOW COME?
JSNode (1 year ago)
Correct, that's why a newer version of jQuery deprecated all of the headaches.
Vijay Kumar (2 years ago)
$(window).load(function () { $('#div1').html("Height is" + $('#img1').height() + "</br>" + "Width is" + $('#img1').width()) }); //$(document).ready(function () { // //$('#Button1').click(function(){ // // alert('hi people') // //}); // alert('hi people'); //}); </script> </head> <body id="b1"> <div id="div1"> <img src="../Images/A.jpg" id="img1" /> <input type="button" id="button1" value="ClickMe!" /> </div> </body> </html> why the image is not getting loaded if the <img> tag is present inside the <div> Please do reply anyone!!
Rahul Kharya (2 years ago)
Hi, try below code, its working fine in my lappy. In case of any query please revert to me. [The image i am using is named "1.jpg" and is present in the same directory where the html file is present]. <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script> $(window).load(function () { $('#div1').html("Height is " + $('#img1').height() + "</br>" + "Width is " + $('#img1').width()) }); //$(document).ready(function () { // //$('#Button1').click(function(){ // // alert('hi people') // //}); // alert('hi people'); //}); </script> </head> <body id="b1"> <div id="div1"> <img src="1.jpg" id="img1" /> <input type="button" id="button1" value="ClickMe!" /> </div> </body> </html>
MR Zero (2 years ago)
$(window).load(function () { $('#div1').html("Height=" + $('#img1').height + "<br/>" + "Width=" + $('#img1').width); }); Hello brother i do not know why this is not work with me
Yadula Chodankar (2 years ago)
Very simple tutorials. Thank you.
malhar jajoo (2 years ago)
Nice , this is the kind of stuff tutorials usually skip by. Thanks !
riahi rim (2 years ago)
very good (y)
Benjamin Barrero (2 years ago)
.load function has been deprecated in newer version of jQuery. Use | $(window).on("load", function(){ ..code.. });
Micky Teddy (2 years ago)
Alamgir Khan (2 years ago)
Sir $(window).load(function(){}); is removed in jquery 3.0.0 or they modified this?
akash mishra (2 years ago)
This is working as per need . thanks
jeniffer (2 years ago)
yah right in jquery 3.0.0 it is totaly oposite of kudvenkat post <script src="jquery-3.1.0.min.js"></script> <script type="text/javascript"> $(document).ready(function() { //alert("window loaded"); $('#div1').html("height=" + $("#img1").height() + "<br/>" + "width=" + $("#img1").width()); }); </script> <div id="div1"></div> <img src="photo.jpg" id="img1">
mike richardson (2 years ago)
Thank you very much!! I have watched several of your videos for various projects. Your professional approach and very detailed explanation of each section is amazing! Thank You again
SuperMichielv (2 years ago)
I use <script src="jquery-3.0.0.js"></script> <script type="text/javascript"> $(document).ready(function() { alert('dom ready'); }); $(window).on('load', function() { alert('window loaded'); }); </script> window loaded fires first, why? see also: https://forum.jquery.com/topic/document-ready-and-window-load-firing-order
jeniffer (2 years ago)
yah becoze in jquery 3.1.0 it is different
Manish Sawant (2 years ago)
Kudvenkat sir......You helped me a lot...not only Jquery but i learned all the Microsoft technologies from you.....you are better than all the others....your videos are much knowledgeable than others....thanks a lot again
Muhammad Wasif Naeem (2 years ago)
Sir many thanks to you, you really made easy .Net and its supportive languages easy. May the Mighty Lord bless you with His uncountable blessings :-)
Ankit Malik (3 years ago)
help me out from this problem-------------- my jQuery(document).ready and jQuery(window).load is working same. both are showing same result.
wally L (3 years ago)
really like this video. comparing to other tutorials, this one is more like a lecture - not that interesting, but really really informative and helpful. thanks
Will (3 years ago)
I just started your tutorials and im very pleased as to were this is heading so far. Good pace and very informative. I notice it is very well planned out. I know a little javascript and will learn more soon enough! Its just Jquery is a priority for me. i hope this doesnt affect me too much in this tutorial series.. Anyways, Thanks alot!
Mike Davies (3 years ago)
Very informative and useful video - thank you.
kudvenkat (3 years ago)
+Mike Davies Thank you for the feedback. I am very glad you found the videos useful. I have organised all the video tutorials in to playlists, which could be useful to you https://www.youtube.com/user/kudvenkat/playlists?view=1&sort=dd If you need physical DVDs or you want to download all the videos for offline viewing please order them using the link below http://www.pragimtech.com/kudvenkat_dvd.aspx Slides and Text Version of the videos can be found on my blog http://csharp-video-tutorials.blogspot.com Tips to effectively use my youtube channel. https://www.youtube.com/watch?v=y780MwhY70s If you want to receive email alerts, when new videos are uploaded, please subscribe to my youtube channel. http://www.youtube.com/subscription_center?add_user=kudvenkat If you like these videos, please click the THUMBS UP button below the video. We like to see these free video tutorials helping others as well. Please share the link with your friends and family who you think would also benefit from them. Thanks Venkat
Haroon Mughal (3 years ago)
owsm one .. thanks buddy
Santhosh Nani (3 years ago)
Bro... getting problem with $(window).load(function () { $('#div1').html("Height=" + $('#img').height + "<br/>" + "Width=" + $('#img').width); }); i have written the code as you wrote, but i'm not getting the height and width bro... please help me
Santhosh Nani (3 years ago)
Cristian Pirloaga (3 years ago)
+Santhoshkumar Polu you fogot to put the corect id. $(#img1)
Dmytro P (3 years ago)
thank you
tadashi nakamura (3 years ago)
well, $(document).ready loads the image date also, even tho everywhere i read they say it should not
parth shah (3 years ago)
Great tutorial ! can u upload php and python tutorials too?  kudvenkat
Fruitless Wager (3 years ago)
Just would like to say that all your tutorials are top notch. Probably one of the best teachers out there. If a person can't learn from you, then I'm going out on the limb and say they would have a problem learning from anyone. Great job!
J Family (3 years ago)
I am writing the similar code. but images are loading and height is also displayed for me. anyone plz answer why. <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <script src="http://code.jquery.com/jquery-2.1.3.js"></script> <script type="text/javascript"> $(window).load(function () { $('#div1').html("Div1 Image height: " + $('#Image1').height() + " and " + $('#Image2').height()); $('#Button1').click(function () { alert("Button clicked"); }); $('#div3').html("Div3 Button loaded"); }); </script> </head> <body> <form id="form1" runat="server"> <div id="div1"></div> <div id="div3"></div> <asp:Image ImageUrl="~/banner1.jpg" ID="Image1" runat="server" /> <img alt="" id="Image2" src="banner1.jpg" /> <asp:Button ID="Button1" runat="server" Text="Button" /> </form> </body> </html>
saroj kumar (3 years ago)
Nice video venkat sir.
sangita Harale (3 years ago)
Great video..u r simply great.
Jiniv Thakkar (3 years ago)
Thank you.. this is awesome !
Monika Jain (3 years ago)
Super video but my application prints height and width both for window.load() and document.ready().Is It possible?
spidertothefly (3 years ago)
Priyanka Prakash (3 years ago)
Great tutorials. Thanks.
Aminul islam (3 years ago)
its really nice tutorial . thank u sir.
subramanya aithal (3 years ago)
Your videos are boon to the people who wants to learn new technology. Kudos to you sir. I learnt asp.net by watching your videos. Thanks a ton
subramanya aithal (3 years ago)
+kudvenkat Thank you for all your references sir. I have already referred your video playlists to my friends
Richard Gordon (3 years ago)
7.35 --  "I'm going to use hash".  Personally i prefer methamphetamine. just saying.
Nikhil B Singh (11 months ago)
What is this 'methamphetamine' by the way? I am wondering even Google answer doesn't help... thanks
JSNode (1 year ago)
Why we do mathapachi lol..
apurv singh (2 years ago)
even i prefer methamphetamine to hash.
B.K. Lee (3 years ago)
This seems to be the really important and basic concept which we have to understand....many thanks...
Shweta T (3 years ago)
@Kudvenkat, Sir, we all are grateful for your free service that too which is extra-ordinarliy higher in stature -> perfectly,organized,sequenced, QUALITY training, updated technologies, beautiful way of explaining/teaching,such a clarity, making tough things look easy. Sir we highly appreciate the TIME you are investing to teach masses. Sir, I was wondering if there is any question-answer forum as well. or Online instant chat facility with the technical experts as such where we,as a registered users/ paid users, could get our queries solved on regular basis? A request: I wish, you hire technical experts under you who could attend chat-pings or online calls  (like the way we have in call-centres) , and considering the fact that it is cost-intensive resource, we would be more than happy to be paid-users.... And I am sure there would be several students/ technical expert advise seekers who would just love to join-in. Trust me, it would help overseas students who cannot afford to attend your classes physically but yet be lucky by having their doubts solved online..
meenakshi sharma (4 years ago)
sir plz , u tell me 1 thing which jquery function used when slider hide in icon after slider verticaly complete how to buid ....???
Diana A (4 years ago)
so why would you ever use $document ready instead of $window load?
Richard Gordon (3 years ago)
+Diana A I arrive at your home page and click contact because i want to make a complaint about your bad customer service. Are you going to take me straight to the contact page with $document.ready or make me wait until all the naked images on the home page has loaded with $window.load...? I hope that explains it. :)
Thanh Binh (4 years ago)
thx so much for all tutorials,pls make more jquery tutorial.Thx <3
Ajeet Malviya (4 years ago)
Hats off Sir..!
Anil Vadlamudi (4 years ago)
Thank you Very much.
folorunso joseph (4 years ago)
Leo Venkat!! The roaring Geek!
mandy .netguy (4 years ago)
Sir how can find out when i use multiple jquery library and result not came out due to clashing of libraries so my question is how can we easily find out which libraries is responsible to wrong o/p  IF u doesnot understand my question then u can mail me on [email protected] U R GREATE TEACHER NO ONE LIKE U. I FOLLOWED SINCE 2 and MORE YEARS.WHAT EVER I LEARN IN .NET I LEARN FROM U THANK YOU VERY MUCH TO PROVIDING SUCH LIKE KNOWLEDGE.
mandy .netguy (4 years ago)
Please provide how can debug simplest way of jquery it is always headache when error in jquery came out 
mandy .netguy (4 years ago)
venkat sir i have question regarding to jquery autocomplete The question is how can display two sql column value in one textbox and autocomplete perform like when i search second word(actually it is second column value in sql table) it shows autocomplete possible result.how can do .
Birkhan Sonkan (4 years ago)
Thanks for this tutorial. Its really priceless the way you explain it.

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.