How to do a success callback when loading JS includes from another script file

Question

I have legacy web app situation where I can't load jquery.min.js from a script tag in the HTML markup.. so I have to load it with some js in another existing script file

var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js';
script.type = 'text/javascript';
head.appendChild(script);

The problem is.. when the include load is slow.. there are jQuery functions (also dynamically loaded on the page) that try to run and can't find jQuery

Is there some cross-browser way to do a callback in the above code that calls the jQuery ready function after the jquery.min.js include file finishes downloading from the CDN? Thanks,

EDIT:

Using Mike's code this is working with onload for nearly all browsers except IE 8 or earlier.. and other browsers which need onreadystatechange I guess

JSFIDDLE HERE:

http://jsfiddle.net/BmyGC/

unixpapa.com/js/dyna.html

rkw
– rkw

2011-12-09 06:08:58 +00:00
Commented Dec 9, 2011 at 6:08 — rkw
– rkw, Commented Dec 9, 2011 at 6:08

Mike · Accepted Answer · 2011-12-09 05:41:46Z

3

try

if(script.onreadystatechange)
  script.onreadystatechange = function()
  {
      if(script.readyState == "complete"  || script.readyState=="loaded")
   {
   script.onreadystatechange = false;
       console.log("complete");
   }
  }
 else
 {
    script.onload = function()
    {
        console.log("complete");
    }
 }

answered Dec 9, 2011 at 5:41

Mike

1,0421 gold badge8 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

stebbin45 Over a year ago

this would be great but I thought this function was not fully cross browser or maybe I'm reading this wrong.. content.screencast.com/users/ssking44/folders/Snagit/media/…

Mike Over a year ago

if onreadystatechange not supported, then performed "onload" event

stebbin45 Over a year ago

I got the onload branch to work but not the readyState part.. even tried this with latest IE..

s = document.createElement("script");    s.src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js";    if(s.addEventListener) {   	s.addEventListener("load",callback,false);    }else if(s.readyState) {   	s.onreadystatechange = callback;    }   document.body.appendChild(s);    function callback() {          //load the jQuery code    }

MSDN link

stebbin45 Over a year ago

with onload.. this is works well in all but older IE.. I have created a jsfiddle to debug the onreadystate version.. JSFIDDLE LINK .. nearly there! thanks

Tarun Nagpal Over a year ago

It worked like a charm. Can you please help me understand the logic behind it ?

Jake Feasel · Accepted Answer · 2011-12-09 05:37:36Z

0

I would put my jquery-based code in yet another separate javascript file, and load that file in exactly the same way you are loading the jquery.min.js. Just do so immediately after jquery.min.js. That should work.

edit

Okay, since that isn't working, try this:

function jqChecker()
{
  if (! jQuery )
  {
    setTimeout(jqChecker, 500); // adjust as needed.
  }
  else
  {
   // insert code to dynamically load your external js file here
  }
}
jqChecker();

edited Dec 9, 2011 at 5:37

answered Dec 9, 2011 at 5:24

Jake Feasel

17k5 gold badges55 silver badges68 bronze badges

3 Comments

stebbin45 Over a year ago

I'm looking at this now in Chrome dev tool timeline and the second (jQ dependent) file seems to load before the jQuery.min.js finishes.. even though the second one starts later.. second one wins race. hence need to start it when a callback fires I'm thinking..

Jake Feasel Over a year ago

I don't think there really is a way to get a real callback when the external files are loaded - but, I've demoed a ghetto means of doing the same, above.

stebbin45 Over a year ago

interesting .. I thought about a timer.. but seemed too inelegant. I will try it now since in this app, the second include file can be quite lazy..

Collectives™ on Stack Overflow

How to do a success callback when loading JS includes from another script file

2 Answers 2

5 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related