6

I want to load jquery asynchronously on a page and then load an other script which depends on jquery (it executes jquery code when loaded). But how can I detect if jquery has finished lodading. Is there an event for this in jquery which fires when the library finished loading?

In theory I could load jquery like this:

<script async src="jquery.js" onload="jqueryloaded()"></script>

but I want the code to work on older browsers too which may not support the async and onload attributes. (In this case jquery is loaded synchronously.) That's why I'm looking for an event which jquery emits when it's loaded. Is there one?

Tom
  • 7,515
  • 7
  • 38
  • 54
  • 3
    I'm not understanding. For browsers that load it synchronously, it'll be done loading after the tag, so you could just put another script below it, and have it check to see if `window.jQuery` is present. `` Otherwise, don't use ` – cookie monster Mar 06 '14 at 16:20
  • @cookiemonster your comment would made a good answer... – A. Wolff Mar 06 '14 at 16:22
  • possible duplicate of [Load javascript async, then check DOM loaded before executing callback](http://stackoverflow.com/questions/4249030/load-javascript-async-then-check-dom-loaded-before-executing-callback) – Deepak Ingole Mar 06 '14 at 16:23
  • @A.Wolff: Thanks, but I think Paul's answer below should be used over hacks to accommodate ` – cookie monster Mar 06 '14 at 16:23
  • @ cookie monster the question was about a single solution which works both for async/sync situation without handling them differently – Tom Mar 06 '14 at 16:34
  • 1
    @Tom: Isn't your `onload` handler a single solution that works for both async/sync situations? The event should fire either way, right? – cookie monster Mar 06 '14 at 16:47
  • @cookie monster it may be if older browser all support onload. Do they? They may be, but if so then why is it not the highest rated answer? It's possible that my assumption that onload may not work on older browsers was false. In this case you answer is the solution. – Tom Mar 06 '14 at 16:50
  • @Tom: Yes, `onload` has been around for ages. Highest rated answer where? – cookie monster Mar 06 '14 at 16:51
  • @cookie monster Here. :) Nobody posted this answer to my question that onload works either case, so I should not worry about it, and simply use ` – Tom Mar 06 '14 at 16:52
  • @Tom: It would seem that way. I'm doing some quick checking for old IE bugs. Maybe there were issues I didn't know about. – cookie monster Mar 06 '14 at 16:53
  • 2
    @Tom: I think you may be right. Seems like there are some old IE issues with `script.onload` support. – cookie monster Mar 06 '14 at 16:55

2 Answers2

16

You can try this:

var script = document.createElement('script');
script.src = 'jquery.js';
script.onload = jqueryloaded; // thx @Cookie_Monster
document.body.appendChild(script);
Paul Rad
  • 4,820
  • 1
  • 22
  • 23
  • 4
    +1 though you can do `script.onload = jqueryloaded;` to make it a little shorter. – cookie monster Mar 06 '14 at 16:24
  • 3
    @JFit `$.ajax` is a jQuery function, and this topic is discussing loading jQuery, so no - you can't. You could use AJAX though. I think this is the best answer though as you can get it to load after the DOM (put the script at the bottom of the body) so that it doesn't slow down the page load, then who cares if it's asynchronous or not? – Reinstate Monica Cellio Mar 06 '14 at 16:27
  • 2
    @JFit `$.ajax()` is a jQuery method, you can't use it before jQuery has been loaded. That's said, for other scripts, you could use: `$.getScript();` method – A. Wolff Mar 06 '14 at 16:28
  • @A.Wolff: This should load it asynchronously. No? – cookie monster Mar 06 '14 at 16:31
  • @cookiemonster No, why it shoudl? To get it async, you will need: `script.async = true;` But i'll go to test it – A. Wolff Mar 06 '14 at 16:33
  • @cookie: yes... i'm 99% sure – Paul Rad Mar 06 '14 at 16:33
  • 1
    @A.Wolff: Pretty sure appended `script` elements are always loaded async. That's why people use `document.write` when they want synchronous script loading as the page loads. *EDIT: Here's a demo:* http://jsfiddle.net/x3J5H/ – cookie monster Mar 06 '14 at 16:34
  • Ah, the good old `document.createElement('script')` method. I was hoping jquery has an event for that, so the simple ` – Tom Mar 06 '14 at 16:38
  • 1
    @Tom: If there was a jQuery specific event that fired when jQuery finished loading, you wouldn't be able to bind the handler unless jQuery was already loaded. – cookie monster Mar 06 '14 at 16:43
  • @Tom isn't it what already do the onload event on script tag? – A. Wolff Mar 06 '14 at 16:44
  • It would be nice to be able to specify a callback function in the jQuery url. – Reinstate Monica Cellio Mar 06 '14 at 16:46
  • 1
    @Archer maybe a little off topic but: http://ejohn.org/blog/degrading-script-tags/ – A. Wolff Mar 06 '14 at 16:47
  • @A.Wolff Yes!! That has bugged me since the very first time I added a script include to a page. Also, if I can't put anything inside the script tags (when it's an include), why the hell can it not be a self closing tag??? – Reinstate Monica Cellio Mar 06 '14 at 16:55
  • @A. Wolff if onload works that answers my quesion. I assumed when asking the question that some older browsers might not support the onload attribute. It may have been a false assumption. – Tom Mar 06 '14 at 16:56
  • The line `script.onload = jqueryloaded;` should be `script.onload = jqueryloaded();`, isn't it? – Lucian P. Apr 14 '20 at 06:00
2

Have you seen http://headjs.com/?. An example it's:

head.load("jQuery.js", function() {
 // Call a function when done
 console.log("Done loading jQuery");
});
csorive
  • 98
  • 4