Comments on: Dynamically Load CSS and JS Files

By: Swarnendu De

Swarnendu De — Sun, 18 Jul 2010 10:29:51 +0000

I use something like this :

var loadJs = function(o) {
var count = 0;
var script;
var files = o.scripts;
if (!isArray(files)) {
files = [files];
}

var head = document.getElementsByTagName(’head’)[0];

for (var k in files) {
script = document.createElement(’script’);
script.type = ‘text/javascript’;
if (typeof o.callback == “function”) {
script.onload = function() {
count++;
if (count == files.length) {
o.callback.call();
}
}
}
script.src = files[k];
head.appendChild(script);
}
}

And the usage :

loadJs({
scripts : ['foo1.js', 'foo2.js'],
callback : function(){
// Do something
// all the pages are loaded now
}
})

By: tom3k

tom3k — Mon, 22 Jun 2009 18:21:38 +0000

umm, my js skills are maybe a 7/10 on a good day… but regarding the comment ‘how can u tell if its already loaded’…

cant you do somthing like

function(file,element){

if(document.getElementById(element)){

…

link.id=element;

By: Matt Hackett

Matt Hackett — Sun, 28 Dec 2008 11:12:03 +0000

@Miguel: That’s odd. Works for me in XP/9.50…

By: Miguel

Miguel — Sun, 28 Dec 2008 10:21:29 +0000

I use this method successfully… but for some reason it seemd not to work for Opera :-( I can see the DOM node beeing created… but the styles don’t load. Any ideas?

By: davidm

davidm — Mon, 29 Sep 2008 15:11:59 +0000

This is not near as evil as using a document.write that has an escaped out script tag as the string which happens all over the place. at least this uses javascript and correct dom manipulation

By: Binny V A

Binny V A — Sun, 28 Sep 2008 19:23:50 +0000

I know of this method – but I cannot bring myself to use it – for some reason, it seems really evil to me.

By: Ralf Lauther

Ralf Lauther — Sun, 28 Sep 2008 17:05:13 +0000

js frameworks like mootools offer this feature!

By: Dav Glass

Dav Glass — Sun, 28 Sep 2008 15:58:39 +0000

Yeah, loading them is the easy part. Now finding out when they are loaded so you can use them is the hard part.

That’s where YUI’s Get Utility comes in handy:
http://developer.yahoo.com/yui/get/

It will fire an event when the files have been loaded so you know that you can use them.