Questions tagged [document-ready]

Use this tag for questions about JavaScript functions that run after the page is loaded.

While JavaScript provides the load event for executing code when a page is rendered, this event does not get triggered until all assets such as images have been completely received. In most cases, the script can be run as soon as the DOM hierarchy has been fully constructed. The handler passed to .ready() is guaranteed to be executed after the DOM is ready, so this is usually the best place to attach all other event handlers and run other jQuery code. When using scripts that rely on the value of CSS style properties, it's important to reference external stylesheets or embed style elements before referencing the scripts.

jQuery document.ready example

$(document).ready(function() {
  // Handler for .ready() called.
});

Read more

717 questions
266
votes
8 answers

$(document).ready shorthand

Is the following shorthand for $(document).ready? (function($){ //some code })(jQuery); I see this pattern used a lot, but I'm unable to find any reference to it. If it is shorthand for $(document).ready(), is there any particular reason it might…
Mark Brown
  • 12,026
  • 8
  • 27
  • 32
211
votes
15 answers

ng-repeat finish event

I want to call some jQuery function targeting div with table. That table is populated with ng-repeat. When I call it on $(document).ready() I have no result. Also $scope.$on('$viewContentLoaded', myFunc); doesn't help. Is there any way to…
ChruS
  • 3,707
  • 5
  • 29
  • 40
121
votes
5 answers

Is $(document).ready necessary?

I saw this question in stackoverflow but do not feel that it was answered at all. Is $(document).ready necessary? I link all my javascripts at the bottom of the page so in theory they are all running after the document is ready anyways.
Joshua Robison
  • 1,868
  • 4
  • 20
  • 24
115
votes
6 answers

How can I run a directive after the dom has finished rendering?

I've got a seemingly simple problem with no apparent (by reading the Angular JS docs) solution. I have got an Angular JS directive that does some calculations based on other DOM elements' height to define the height of a container in the…
Jannis
  • 17,025
  • 18
  • 62
  • 75
112
votes
8 answers

When should I use jQuery's document.ready function?

I was told to use document.ready when I first started to use Javascript/jQuery but I never really learned why. Might someone provide some basic guidelines on when it makes sense to wrap javascript/jquery code inside jQuery's document.ready? Some…
tim peterson
  • 23,653
  • 59
  • 177
  • 299
105
votes
5 answers

Requirejs domReady plugin vs Jquery $(document).ready()?

I am using RequireJS and need to initialize something on DOM ready. Now, RequireJS provides the domReady plugin, but we already have jQuery's $(document).ready(), which is available to me since I have required jQuery. So I have got two options: Use…
Yugal Jindle
  • 44,057
  • 43
  • 129
  • 197
88
votes
6 answers

Why "$().ready(handler)" is not recommended?

From the jQuery API docs site for ready All three of the following syntaxes are equivalent: $(document).ready(handler) $().ready(handler) (this is not recommended) $(handler) After doing homework - reading and playing with the source code, I…
gdoron
  • 147,333
  • 58
  • 291
  • 367
76
votes
14 answers

jQuery $(document).ready () fires twice

I've been sifting around the web trying to find out whats going on here and I have not been able to get a concrete answer. I have one $(document).ready on my site that seams to run multiple times regardless of the code that is inside it. I've read…
Xenology
  • 2,357
  • 2
  • 21
  • 39
72
votes
9 answers

What is the difference between $(window).load and $(document).ready?

I have been having a problem lately with my JavaScript CODE and taking a portion of my code out of my $(document).ready() and putting it within $(window).load() fixed the problem. Now I understand that window.load is fired just after…
Mark McCook
  • 1,638
  • 2
  • 13
  • 11
47
votes
10 answers

Hide page until everything is loaded Advanced

I have a webpage which heavily makes use of jQuery. My goal is to only show the page when everything is ready. With that I want to avoid showing the annoying page rendering to the user. I tried this so far (#body_holder is a wrapper inside…
Email
  • 2,395
  • 3
  • 35
  • 63
45
votes
3 answers

Shortcuts for jQuery's ready() method

I have seen some shortcuts for the ready() method and would like to know which actually happens first, because my test results confuse me.. $(document).ready(function(){ alert("document ready"); }); $(window).load(function(){ alert("window…
Wilkins
  • 800
  • 2
  • 6
  • 12
39
votes
6 answers

Does AJAX loaded content get a "document.ready"?

Yesterday I had an issue where a .on('click') event handler I was assigning wasn't working right. Turns out it's because I was was trying to apply that .on('click') before that element existed in the DOM, because it was being loaded via AJAX, and…
user2762294
38
votes
2 answers

Javascript like $(document).ready() for "modern HTML5" browsers

This is most likely already a question somewhere, but I cannot find it, as EVERY single search turns up jQuery questions. I'm looking for a proven method to bind to the document being ready, much like jQuery's $(document).ready(). However, this is…
Randy Hall
  • 7,716
  • 16
  • 73
  • 151
36
votes
3 answers

Differences between document.ready and $function

Possible Duplicate: What is the difference between these jQuery ready functions? jquery: Choosing a document.ready method What is the difference between doing this $(function() { $("a").click(function(event){ alert("Thanks for…
Matt Morey
  • 984
  • 1
  • 11
  • 14
35
votes
9 answers

jQuery - function inside $(document).ready function

Is it correct to create functions inside of $(document).ready(function() { like so: $(document).ready(function() { function callMe() { } }); The function inside of the .ready() does not have to call before DOM is ready and event…
user398341
  • 6,339
  • 17
  • 57
  • 75
1
2 3
47 48