ACTUALIZACIÓN:
Bueno pues no se si a alguno de ustedes les ha surgido el problema de que su sistema esta demasiado cargado al inicio de archivos javascript y css que realmente solo lo utilizan ciertos módulos, pues a mi hace unos meses me surgió ese problema e investigando me puse a trabajar en una libreria que cargara los archivos Javascript mediante el DOM simplemente llamando a un método. La libreria fue basada en este artículo de Sentido Web y en este otro de phpied. El código es el siguiente:
var ScriptLoader = {
//Método a llamar para cargar el script
loadScript: function(file,opt) {
if(typeof opt!=”object”) opt = {};
if(opt.id==undefined) opt.id = “js_”+file;
id=opt.id;
var head = document.getElementsByTagName(‘head’).item(0)
var scriptTag = document.getElementById(id);
//Si no se quiere cache se genera un número aleatorio
if(opt.cache==false){
var milisegundos = new Date().getTime().toString();
if(file.indexOf(“?”)!=-1) file = file+”&”;
else file = file+”?”;
file = file+milisegundos;
}
if(scriptTag) return;
script = document.createElement(‘script’);
script.src = file;
script.type = ‘text/javascript’;
script.id = id;
head.appendChild(script);
//Para IE
script.onreadystatechange = function () {
if (script.readyState == ‘complete’) {
if(typeof opt.oncomplete == “function”) {
opt.oncomplete();
}
}
}
//Para Firefox
script.onload = function () {
if(typeof opt.oncomplete == “function”) {
opt.oncomplete();
}
}
return;
},
unloadScript: function(id){
var head = document.getElementsByTagName(‘head’).item(0)
var scriptTag = document.getElementById(id);
if(scriptTag) head.removeChild(scriptTag);
return;
},
loadCSS:function(file,opt){
if(opt==null) opt = {};
if(opt.id==undefined) opt.id = “css_”+file;
id=opt.id;
var head = document.getElementsByTagName(‘head’).item(0)
var scriptTag = document.getElementById(id);
if(scriptTag) return;
//Si no se quiere cache se genera un número aleatorio
if(opt.cache==false){
var milisegundos = new Date().getTime().toString();
if(file.indexOf(“?”)!=-1) file = file+”&”;
else file = file+”?”;
file = file+milisegundos;
}
css = document.createElement(‘link’);
css.rel = ‘stylesheet’;
css.href = file;
css.type = ‘text/css’;
css.id = id;
head.appendChild(css)
return;
},
unloadCSS:function(id){
var head = document.getElementsByTagName(‘head’).item(0)
var scriptTag = document.getElementById(id);
if(scriptTag) head.removeChild(scriptTag);
return;
}
}
[/code]
La forma de uso es simple, solo incluyen el archivo scriptloader.js al principio de su página
[/code]
Y para incluir el archivo se llama de la siguiente forma:
ScriptLoader.loadScript(“http://ruta/al/archivo.js”,{cache:false, oncomplete: function(){alert(‘Probando carga de archivo’)}});
[/code]
Los parámetros son opcionales y pueden ser los siguientes:
- id: especifica una id para el archivo, si se deja nulo el script le asigna una id del tipo js_archivo
- cache: true o false. Si se especifíca en false la libreria le asignara un ?random al final de manera que el archivo siempre se renueve al momento de cargar la pá
- onComplete: esto nos permite indicarle algun evento al momento de que el script se cargue en su totalidad
De la misma manera para incluir un archivo CSS es necesario escribir:
ScriptLoader.loadCSS(“http://ruta/al/archivo.css”);
[/code]
Bueno pues espero que les sirva este aporte (no pretendo reinventar el hilo negro).
Pueden descargarlo aquí
Ver Demo
Saludos…