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

this is what im trying to do

<script type="text/javascript" src="resources/application.js"></script>
    <script type="text/javascript" >
       $(document).ready(createHeader()); 
       $(document).ready(scriptSet()); 
    </script>

id like to avoid having to separate the two, and while generally i see script links only inside the header the document.ready functions dont seem to work when put there. However, everything seems to work pletely fine when placed at the end of the body, so would this cause any problems or is this fine?

this is what im trying to do

<script type="text/javascript" src="resources/application.js"></script>
    <script type="text/javascript" >
       $(document).ready(createHeader()); 
       $(document).ready(scriptSet()); 
    </script>

Share Improve this question edited Jul 27, 2011 at 2:25 Sparky 98.8k26 gold badges202 silver badges290 bronze badges asked Jul 27, 2011 at 2:01 user667122 492 silver badges5 bronze badges

Do you have a reference of the jquery library before those scripts? Also, you do not need multiple $(document).ready() in one file. – Alex R. Commented Jul 27, 2011 at 2:03
1 Why don't you have anonymous functions in the ready() call? – Jared Farrish Commented Jul 27, 2011 at 2:04
I often have the librairies (jQuery, plugins,...) in the header and page specific scripts linked directly in the body. In my experience it works fine like that. – Pierre Henry Commented Jul 27, 2011 at 2:07
Jared is right ! if you want to give direct references to functions defined in your script file to the ready event handler, then I think it should be without the parentheses: document.ready(createHeader); Otherwise define an anonymous function. – Pierre Henry Commented Jul 27, 2011 at 2:10

Add a ment |

6 Answers 6

Sorted by: Reset to default 8

Functionally, as long as you enclose your code inside a $(document).ready(function(){ }); and it es after the jQuery file includes, it does not matter if it's in the head or the body. $(document).ready ensures that the DOM is fully loaded before any script is executed.

HOWEVER, putting all of your script includes and scripts at the bottom of the body is best for loading performance.

This article explains it nicely.

Example:

        <body>

    <!-- MY HTML CODE -->

    <!-- START javascript -->
        <script type="text/javascript" src="/javascript/jquery/jquery-1.6.2.min.js"></script>
        <script type="text/javascript" src="/javascript/jquery/plugins/jquery.random_plugin.js"></script>
        <script type="text/javascript" src="/javascript/jquery/plugins/jquery.random_plugin2.js"></script>
        <script type="text/javascript" src="/javascript/some_other_scripts.js"></script>

        <script type="text/javascript" language="JavaScript">
        //<![CDATA[
            $(document).ready(function(){
                // my code
            });
        //]]>
        </script>
    <!-- END javascript -->

        </body>

There is no problem with having script tags in the body. Just remember that the page is parsed top-down, so scripts have to be included before they are used.

You do realize that the functions you have put inside $(document).ready() are not going to wait for DOMContentLoaded to fire? You have to wrap them inside a function call (event handler) in order to avoid calling them instantly when they show up in the code. An anonymous function is usually just fine.

$(document).ready(function(){
    createHeader();
    scriptSet();
});

I have deployed a number of web applications, and haven't ever had a problem with the script being in the body tag. I like to place it at the end of the page so as not to impede download progress of the visible elements on the page. I believe that Google has also done this with some of their scripts (maybe Analytics?).

Like some of the others have said, make sure that you have your jQuery reference before the $(document).ready(); call. It's easy to slip past, and hard to troubleshoot :)

JMax

Nop, in fact its good for "performance" to put your scripts at the end of your HTML.

Still a good practice is to have all your javascript in another file and just set a header calling it, if posible even pressing the file.

Now, I would change that code for this

$(document).ready(function(){
    createHeader();
    scriptSet();
});

so you dont call $(document).ready twice :)

It typically does not matter if you put your script includes and blocks within your BODY element; they'll run perfectly fine in most cases. Some people believe it a bad practice, but it's not a wrong practice. It happens all the time.

However, I'd like to point out that it will not matter where you put a $.ready() function call, as long as it's after the jQuery include, as it will always run AFTER the DOM is ready (which will occur AFTER page load). So, in this case it doesn't make any difference.

Note the anonymous function in the function call. This passes a reference to $.ready() for the anonymous function, which allows it's function body to be executed at a later time, hence your functions will be called at a later time.

<script type="text/javascript">
$(document).ready(function(){
    createHeader(); 
    scriptSet();
}); 
</script>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

jquery - Will linking javascript files in the body rather than in the header cause a problem? - Stack Overflow

6 Answers 6

与本文相关的文章

评论列表(0)