How to load jquery last

Question

I have searched the web, found some answers but none of them work. All i want for my site to load faster. I have minified my images. Now am using jquery and used version hosted by google. Though it's not hosted on my site, it's the heaviest file (32kb) in the site and it loads 2nd on the line before any other images. I have tried the adding a javascript before the body closing tag like this:

<script language="javascript">

      var e=document.createElement('script');
      e.setAttribute('type','text/javascript');
      e.setAttribute('src','http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js');

      document.body.appendChild(e)

      var f=document.createElement('script');
      f.setAttribute('type','text/javascript');
      f.setAttribute('src','myjs.js');
      document.body.appendChild(f)
  </script>

On firebug console, it shows that jquery is loaded last. However it also shows uncaught reference error $ not defined, which am guessing an error you get when jquery isn't loaded properly.

If i put these two js files inside the head tag, everything works fine.

How can I accomplish this task?

thanks.

regarding uncaught reference error $. you have to make sure your jQuery Library reference i loaded first before any of your script. For improving the performance, what platform or you in ? if you are on .NET you can use bundling. else try CDN. — HaBo, Apr 16 '13 at 14:56
Are you deferring all JavaScript to the end of the page as well? If you defer jQuery to the end of the page load but are referring to jQuery in any non-deferred (i.e. not onload) context then you will encounter that error. — Dogoferis, Apr 16 '13 at 14:57
Are you sure loading jQuery is the main bottleneck ? Profile your page loading (for example with Firbug's `Net` tab) and see where time is really spent. — LeGEC, Apr 16 '13 at 15:03
possible duplicate of [Load jQuery with Javascript and use jQuery](http://stackoverflow.com/questions/10113366/load-jquery-with-javascript-and-use-jquery) — Barmar, Apr 16 '13 at 15:05

score 1 · Accepted Answer · edited May 23 '17 at 12:12

1

Loading javascript files dynamically causes them to be loaded asynchronously, so you can't guarantee which library will load first. If you need to enforce order (as you always will with a library like jQuery), you'll need to add script tags with src attributes to page like so:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="myjs.js"></script>

If you add your script tags as the last elements in the body element rather than the head, it will give the appearance of loading faster (progressive enhancement).

EDIT As one of the commenters noted, you can read the answer to this question to get more detail.

edited May 23 '17 at 12:12

Community

1
1

answered Apr 16 '13 at 15:05

cfs

10,610
3
30
43

your suggestion sounds like more inclined to solving my problem. not very good with javascript.. how do i go about adding script tags and src attributes on the provided script? – Saint Dee Apr 16 '13 at 15:12
I edited my answer to include the script tags. Hope this helps! – cfs Apr 16 '13 at 15:14

score 0 · Answer 2 · answered Aug 31 '18 at 03:42

I was unable to force the script order in a particular system and I was able to get around the issue by wrapping my jQuery code with addEventListener

<script><!--
(function() {
    'use strict';
    window.addEventListener('load', function() {
        // All resources loaded
        $('#my-selector').on('click', function(event){
            //Do something
        });
    }, false);
})();
//--></script>

Which allows me to load jQuery at the bottom of the document and still use '$' in my code further up in the DOM where needed. Not a perfect solution for all situations, but served my purposes ;)

How to load jquery last

2 Answers2