All geek questions in one place

Can I use jquery $ (document) .ready () once in one html page?

I have one html page called "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 () {on the page a single html

Thanks in advance

+6
source share
5 answers

You can use as much as you want, but it's best to keep it on one for easy reading.

Also consider using the shortcut $(function() { ... });

+6
source

No, that doesn't matter.

However, everything may be contained within the same.

EDIT:

See my answer in this section for a detailed explanation of your comment:

Will linking javascript files in the body, and not in the header, cause a problem?

+2
source

Does it matter if I use multiple $ (document) .ready (function () {in one html page

Yes, it is important.

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

For the code and plugins you write, you should always use only one $(document).ready() or $(window).load() , but you will find many plugins starting from this call, as you pointed out.

Edit

If you really cannot resist using $ (document) .ready () more than once, at least try to save the link to the document in a variable the first time you use it, so you don't have to check the document object every time, for example:

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

At least you will save some function calls.

+2
source

Not in the least. They are both going to speak at the same event. It's great.:)

+1
source

Does it matter if I use multiple $ (document) .ready (function () {in one html page

No, that doesn't matter, and in some cases (reading: a lot) the right way. However, as always, I would like to give some (useful) pointers:

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

[EDIT: this part of my answer is inaccurate, see comments below] Also, it is not practical to add jquery inside in the footer or even in the <body> . This is technically wrong, but if you are dealing with cms-like software or some template function, then you want jQuery to be enabled on all pages. OR you can just call it your old school knowledge.

Since you want to call Photos.js and Animations.js in the footer, I assume that they are not the correct plugins. If you want to make your code more rigid, then assemble them into the correct plugin. Then you can add plugins to the header and have one footer file in which you assign plugins to elements (read: activate them.) Here is a quick guide on how to create your own plugins.

In addition, if you have several JS files that should be included in the page. Then you can make your code $.getScript() using $.getScript() . You must add jQuery first, as always, but you can call other files in a single <script> . It looks more neat, and it seems to be a little faster (at least in my own head.) I will give you a small 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>
+1
source

Source: https://habr.com/ru/post/895328/

More articles:


All Articles