load jquery after the page is fully loaded

Question

I m looking for a way to load jquery after the page is fully loaded   well there are lots of questions and answers about it in here  but all describe how to run a script that needs jquery after either page or jquery fully loaded   What I m looking for is to load the page and then call jquery and after the jquery is loaded call the functions  something like   document onload function       var fileref document createElement  script      fileref setAttribute  type   text javascript      fileref setAttribute  src    http   code jquery com jquery-1 7 2 min js      Here I need an event to know that jquery is    loaded to run stuff that needs jquery

User · Accepted Answer

I have asked this question more than 6 years ago, and any answers I got had some flaws. Later I myself worked out a solution that I have been using for years since then. Now that I came across my own question again and I saw that it has many views, I'd like to share it because I think it may help others.

This problem mainly occurs on Master-Detail type of pages (can be old .master and .aspx pages) or (layout and views in asp.net) or any similar situation maybe on other web development languages, however always there is a master-detail pattern involved.

For the solution, I just add an array at the beginning of my page:

<script>var after = [];</script>

any function that requires jQuery or any other script that would run after this section, instead of running it, I just push it to this array:

after.push(function(){
     // code that requires scripts that will load later,
     //might be for example a jQuery selector or ...
});

and then at the very end of the page, right before closing the body tag (of course scripts are loaded by now) I run all the functions inside the (here named) after array:

<script>for(var i=0;i<after.length;i++)after[i]();</script>
</body>

I find this way very easy, simple and flawless.

User · Answer

If you re trying to avoid loading jquery until your content has been loaded  the best way is to simply put the reference to it in the bottom of your page  like many other answers have said   General tips on Jquery usage    Use a CDN  This way  your site can use the cached version a user likely has on their computer  The    at the beginning allows it to be called  and use the same resource  whether it s http or https  Example     lt script src    ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt    Using a CDN has a couple of big benefits  it makes it more likely that users have it cached from another site  so there will be no download  and no render-blocking   Further  CDNs use the closest  fastest connection available  meaning that if they do need to load it  it will probably be faster than connecting to your server  More info from Google    Put scripts at the bottom  Move as much of your js to the bottom of the page as possible  I use php to include a file with all my JS resources below the footer  If you re using a template system  you may need to have javascript spread throughout the html output  If you re using jquery in scripts that get called as the page renders  this will cause errors  To have your scripts wait until jquery is loaded  put them into   window onload     function            your js that isn t called by user interaction         This will prevent errors but still run before user interaction and without timers   Of course  if jquery is cached  it won t matter too much where you put it  except to page speed tools that will tell you you re blocking rendering

User · Answer

You can also use     window  bind  load   function             Your code here

User · Answer

Try this      document  ready function        When the document is ready    Do something

User · Answer

You can try using your function and using a timeout waiting until the jQuery object is loaded   Code   document onload function        var fileref document createElement  script        fileref setAttribute  type   text javascript        fileref setAttribute  src    http   code jquery com jquery-1 7 2 min js        document getElementsByTagName  head   0  appendChild fileref       waitForjQuery       function waitForjQuery         if  typeof jQuery     undefined                do some stuff       else           window setTimeout function      waitForjQuery       100

User · Answer

if you can load jQuery from your own server  then you can append this to your jQuery file   jQuery document  trigger  jquery loaded     then you can bind to that triggered event

User · Answer

It is advised to load your scripts at the bottom of your  lt body gt  block to speed up the page load  like this     lt body gt   lt  -- your content -- gt   lt  -- your scripts -- gt   lt script src      gt  lt  script gt   lt  body gt   lt  html gt

User · Answer

You can either use  onload function  It runs a function when the page is fully loaded including graphics   window onload function             Run code          Or another way is   Include scripts at the bottom of your page

User · Answer

Include your scripts at the bottom of the page before closing body tag   More info HERE

User · Answer

For your problem  the solution might be to attach CDN hosted by google with certain library   https   developers google com speed libraries devguide  Also  you can add this at the bottom of page  just before  lt  body gt      lt script type  text javascript  gt   function         var script   document createElement  script       script setAttribute  type    text javascript       script setAttribute  src    https   ajax googleapis com ajax libs jquery 2 0 3 jquery min js       document getElementsByTagName  head   0  appendChild script         lt  script gt    However  this is risky in my opinion  You have an asynchronous call for jquery  thus your jquery has to wait until it loads  ie    document  ready won t work in this case   So my answer would be  use a CDN like google suggests  put your javascript on the bottom just before  lt  body gt   and  ignore flags from profilers

User · Answer

My guess is that you load jQuery in the  lt head gt  section of your page  While this is not harmful  it slows down page load  Try using this pattern to speed up initial loading time of the DOM-Tree    lt  doctype html gt   lt html gt   lt head gt       lt title gt  lt  title gt       lt meta charset  utf-8  gt        lt  -- CSS -- gt       lt link rel  stylesheet  type  text css  href    gt   lt  head gt    lt body gt       lt  -- PAGE CONTENT -- gt        lt  -- JS -- gt       lt script type  text javascript  src  http   code jquery com jquery-1 7 2 min js  gt  lt  script gt       lt script gt            function                    body   append   lt p gt I can happily use jQuery lt  p gt                      lt  script gt   lt  body gt    lt  html gt    Just add your scripts at the end of your  lt body gt tag   There are some scripts that need to be in the head due to practical reasons  the most prominent library being Modernizr

[javascript] load jquery after the page is fully loaded

Examples related to javascript

Examples related to jquery

Examples related to html