How to dynamically load scripts

Question

I need to load some js files dynamically and sequentially(i.e. second script loads after load complete of first one, third after second and so on).

Question: how to detect when a script have been loaded? I have encountered problems with onload event - it not fires in IE8. After reading this, I tried to subscribe to onreadystatechange and wrote very ugly code for loading a script:

function loadScript(url, callback) { var isLoaded = false; var script = document.createElement('script'); script.onreadystatechange = function () { if ((script.readyState == 'complete' || script.readyState == 'loaded') && !isLoaded) { if (callback) callback(); } }; script.setAttribute('type', 'text/javascript'); script.setAttribute('src', url); document.head.appendChild(script); };

Can you suggest better cross browser solution without such tricks?

UPD: Thanks for answers. What should I do if I need also to load jquery.js(for example, client have old version) :)?

Regarding your update: why not include the library for loading your scripts (for example jQuery) like any other JavaScript file: <script src="jquery-1.5.1.min.js" type="text/javascript"></script> I don't see an easy way or the necessity to dynamically add the library you are going to use to load scripts dynamically. — Preli
– Preli, Commented Aug 18, 2011 at 18:35
@Preli, it will be embedded to another sites with one script and one div tags. — 2xMax
– 2xMax, Commented Aug 18, 2011 at 20:21

Preli · Accepted Answer · 2011-08-18 17:01:07Z

I think what you need is jQuery.getScript

The function takes a URL and a success method with which you can chain loading of scripts and therefore load them sequentially:

jQuery.getScript( url, function() { jQuery.getScript( url2, function() {/*... all 2 scripts finished loading */} ); });

Flavien Volken · Accepted Answer · 2013-03-07 16:00:41Z

Here is my snippet for loading several scripts using jQuery.getScript();

function getScripts(inserts, callback) { var nextInsert = inserts.shift(); if (nextInsert != undefined) { console.log("calling"+nextInsert); jQuery.getScript(nextInsert, function(){ getScripts(inserts, callback); }) .fail(function(jqxhr, settings, exception){alert("including "+nextInsert+" failed:\n" +exception)}); } else { if (callback != undefined) callback(); } };

Usage:

var includes = [ "js/script1.js", "js/script2.js", "js/script3.js" ]; getScripts(includes, function(){ /* typically a call to your init method comes here */; });

betamax · Accepted Answer · 2011-08-18 17:03:52Z

RequireJS:

... is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and Node. Using a modular script loader like RequireJS will improve the speed and quality of your code.

Says it is IE 6+, Firefox2 2+, Safari 3.2+, Chrome 3+ and Opera 10+ compatible.

Collectives™ on Stack Overflow

How to dynamically load scripts

3 Answers 3

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Linked

Related