Can i use more than once $(document).ready() of jquery in a single html page?

Question

i have one html page named "text.html"

<html>
    <body>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="js/Photos.js"></script>
        <script type="text/javascript" src="js/Animations.js"></script>
    </body>
</html>

Both Photos.js and Animations.js start with "$(document).ready()" like this

//Javascript File Photos.js
$(document).ready(function() {
    //My code here ....
});

//Javascript File Animations.js
$(document).ready(function() {
    //My code here ....
});

Does it matter if i use multiple $(document).ready(function() { in a single html page??

Thanks, in advance

score 7 · Answer 1 · answered Aug 18 '11 at 14:03

7

You can use as many as you would like, but its best to keep it to one for readability.

Also consider using short hand $(function() { ... });

answered Aug 18 '11 at 14:03

wesbos

25,839
30
106
143

1

Is $(function() { ... }); same as $(document).ready(function() {?? – programmer Aug 18 '11 at 14:06

score 3 · Answer 2 · edited May 23 '17 at 12:22

3

No, it does not matter.

However, everything can be contained within the same one.

EDIT:

See my answer in this thread for a detailed explanation regarding your comment:

Will linking javascript files in the body rather than in the header cause a problem?

edited May 23 '17 at 12:22

Community

1
1

answered Aug 18 '11 at 14:02

Sparky

98,165
25
199
285

Hm...i read in an old post in stackoverflow that if i include the before
, there is no need for document.ready(function(){, is that right??
– programmer Aug 18 '11 at 14:07
@programmer: That may or may not be true, but using `document.ready` will **gaurantee** that the DOM is fully loaded before executing the code. I think putting the code just before the `
` tag is still a good idea for loading performance. See my updated answer for details.
– Sparky Aug 18 '11 at 14:17

Jose Faeti · Answer 3 · 2011-08-22T12:13:38.813

Does it matter if i use multiple $(document).ready(function() { in a single html page??

Yes, it matters.

The jQuery function is being called more than once for the same thing, thus wasting time and memory.

For code and plugins you write, you should always try to use only one $(document).ready() or $(window).load(), but you will find many plugins starting with that call like you pointed out.

Edit

If you really can't resist about using $(document).ready() more than once, at least try to store the reference to the document in a variable the first time you use it, so you don't have to check every time for the document object, like this:

// store the jQuery document object to a variable
var $document = $(document);

$document.ready( //... );

At least you'll save some function calls.

This is actually a very valid point. Better then my answer. Technically in the "working" matter, multiple $(document).ready()'s work, but its not wise. — Kalle H. Väravas, Aug 22 '11 at 10:54

score 2 · Answer 4 · answered Aug 18 '11 at 14:02

2

Not in the slightest. They're both just going to trigger on the same event. That's fine. :)

answered Aug 18 '11 at 14:02

thugsb

22,856
6
30
44

Kalle H. Väravas · Answer 5 · 2011-08-22T10:04:52.093

Does it matter if i use multiple $(document).ready(function() { in a single html page??

No it doesn't matter and in some (read: many) cases is the correct way to do. However, like always, I like to give some (useful) pointers:

As you mentioned in a comment, technically adding the file-call before </body> does mean, that you basically don't need to use $(document).ready(). I personally try to avoid as much as I can, since jQuery isn't that strict as JS alone (meaning: most of scripts work without $(document).ready()).

[EDIT: This part of my answer is not accurate, please see comments below] Also, it is not wise to add the jquery inside in the footer, or even in the <body>. It is technically not incorrect, but if you are dealing with a cms-like software or some template feature, then you want all the pages to have jQuery included. OR you can just call it my oldschool knowledge.

Since you want to call the Photos.js and Animations.js in the footer, I assume, they are not proper plugins. If you want to make your code tighter, then compose them into correct plugin. Then you can add the plugins in the header and have single footer file, in what you assign the plugins to elements (read: activate them.) Here is a quick tutorial on how to create your own plugins.

Also, if you have multiple JS files, that must get included to the page. Then you could make your code neater by using $.getScript(). You must add jQuery first like always, but calling the other files can be done in one <script> tag. Looks neater and it seems to be a little faster as well (at least in your own head.) I give you a little example:

<html>
    <head>
        <script type="text/javascript" src="jquery.js"></script>
    </head>
    <body>
        <!-- Content camps here -->
        <script type="text/javascript">
            $.getScript('js/Photos.js');
            $.getScript('js/Animations.js');
        </script>
    </body>
</html>

I disagree with "Also, it is not wise to add the jquery inside in the footer, or even in the ". See http://developer.yahoo.com/performance/rules.html#js_bottom. However I agree with the fact that many cms developers do not know about this practice and you are forced to add javascript in the instead of just before . — T. Junghans, Aug 22 '11 at 09:54
That's a very good point. I must admit, I was not aware of that. Comes handy on my current project (cms software.) Since most cms's have header.php and also footer.php static, then adding the scripts to footer is not that difficult, but my instinct is still telling me not to add the jQuery as one of the most important libary in the footer.. :/ — Kalle H. Väravas, Aug 22 '11 at 10:07
jQuery should definitely be the first script you include. And I know of cms that don't only have javascript in the head but also inline (in html tags). If these depend on jQuery, it'll need to be included right on top. — T. Junghans, Aug 22 '11 at 10:36
I just tested this method. Basically, it made the page load longer. I do get the method, but in my current project it made page load (script wise) longer. In cms admin area, there are not many images, and backgrounds are taken from css anyways, which will be loaded before scripts. This means, that in some cases, this method makes the page load longer. However, it is must-know method..just pick projects carefully, where you want to use it. — Kalle H. Väravas, Aug 22 '11 at 10:52

Can i use more than once $(document).ready() of jquery in a single html page?

5 Answers5