How to detect when asynchronously loaded jquery has finished loading?

6
votes

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?

2
javascriptjqueryeventsasynchronousload
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. <script>if (window.jQuery) jqueryloaded();</script> Otherwise, don't use <script async if you need to support all browsers. – cookie monster
@cookiemonster your comment would made a good answer... – A. Wolff
possible duplicate of Load javascript async, then check DOM loaded before executing callback – Deepak Ingole
@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
@Tom: I think you may be right. Seems like there are some old IE issues with script.onload support. – cookie monster

2 Answers

16
votes

You can try this:

var script = document.createElement('script');
script.src = 'jquery.js';
script.onload = jqueryloaded; // thx @Cookie_Monster
document.body.appendChild(script);
2
votes

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");
});