Dynamic, cross-browser script loading

Question

I know that IE doesn't have a load event for <script> elements — is there any way to make up for that reliably?

I've seen some talk of things (e.g., requestState == "complete") but nothing very verifiable.

This is to be used so that code can be called after a script is finished loading, so that I don't have to use AJAX to load new sources (thus eliminating issues with cross-domain AJAX).

Can you just put a function call in the script you're loading that would run as the script is evaluated that would become your completion callback? — jfriend00
– jfriend00, Commented Jul 17, 2011 at 16:48

martin jakubik · Accepted Answer · 2017-12-01 10:52:46Z

25

You can use a script loader like head.js. It has its own load callback and it will decrease load time too.

From the headjs code: (slightly modified to be more portable)

function scriptTag(src, callback) { var s = document.createElement('script'); s.type = 'text/' + (src.type || 'javascript'); s.src = src.src || src; s.async = false; s.onreadystatechange = s.onload = function () { var state = s.readyState; if (!callback.done && (!state || /loaded|complete/.test(state))) { callback.done = true; callback(); } }; // use body if available. more safe in IE (document.body || head).appendChild(s); }

edited Dec 1, 2017 at 10:52

martin jakubik

4,1485 gold badges32 silver badges42 bronze badges

answered Jul 17, 2011 at 16:56

Ilia Choly

18.6k14 gold badges95 silver badges166 bronze badges

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

8 Comments

Aaron Yodaiken Over a year ago

I'm afraid I don't understand how a library can reduce load time caused by network latency :)

Ilia Choly Over a year ago

browsers load `<script>' sequentially. head.js loads them asynchronously, but still executes them in the correct order

Ilia Choly Over a year ago

how do you figure? All the scripts will load faster if you have them loading at the same time as opposed to one after another. Maybe I'm just bad at explaining, there's a good description on the headjs site.

user1637281 Over a year ago

This method allows you to control parallel and serial loading. It also allows you to know when they are completed. This is better than the browser which just loads from the top down synchronously and which will hold up content below.

bosgood Over a year ago

If code in one script depends on code in another one, that's a sign you might want to be concatenating some of the scripts together if you can.

|

Community · Accepted Answer · 2021-01-26 06:21:52Z

I want to add that if you don't support IE7 and below, you don't need onreadystatechange stuff. Source: quircksmode.org

Simplified and working code from original answer:

function loadScript(src, callback) { var s = document.createElement('script'); s.type = 'text/javascript'; s.src = src; s.async = false; if(callback) { s.onload = callback; } document.body.appendChild(s); }

score 2 · Accepted Answer · 2012-11-28 23:54:50Z

This is just an extension of ilia's answer. I used scriptTag like this: Works great:

 // these 3 scripts load serially. scriptTag(boot_config.DEPENDENCIES.jquery,function(){ // jquery ready - set a flag scriptTag(boot_config.DEPENDENCIES.jqueryui,function(){ // jqueryui ready - set a flag scriptTag(boot_config.DEPENDENCIES.your_app,function(){ // your_app is ready! - set a flag }); }); }); // these 2 scripts load in paralell to the group above scriptTag(boot_config.EXTERNALS.crypto,function(){ // crypto ready - set a flag }); scriptTag(boot_config.EXTERNALS.cropper,function(){ // cropper ready - set a flag });

Collectives™ on Stack Overflow

Dynamic, cross-browser script loading

3 Answers 3

8 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

Comments

Comments

Linked

Related