JS defer and jQuery ready event

jquery

Solution

The defer attribute, when present, specifies that the script is executed when the page has finished parsing. But you are using the jquery variable `$` before the page has finished parsing and at that time the jquery script is not loaded and has not initialized `$`.

Instead of using the defer attribute, move the script-tags from the header to the bottom of the page, just before the `</body>` tag.

<html>
    <head></head>
    <body>

        ... 

        <script src="@Url.Content("~/Scripts/jquery-1.8.2.min.js")" type="text/javascript"></script>


        <script type="text/javascript">
            $(document).ready(function () {
              //MyLoadCode
            });
        </script>
    </body>
</html>

Problem

I have added `defer` atribute to my jquery script to increase web page performance but now I get error `$ is not defined`. I need to execute JS code when page loads so I use jQuery.ready event but it do not work when defer is used. ``` <head> <script defer="defer" src="@Url.Content("~/Scripts/jquery-1.8.2.min.js")" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { //MyLoadCode }); </script> </head> ```

Original source