Incluye tus Archivos JS y CSS Cuando los necesites

ACTUALIZACIÓN:

He modificado la libreria y la simplifique mucho mas pueden revisarla en esta direcció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;
}
}

La forma de uso es simple, solo incluyen el archivo scriptloader.js al principio de su página

<script src=“http://ruta/a/scriptloader.js” type=“text/javascript”></script>

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’)}});

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”);

Bueno pues espero que les sirva este aporte (no pretendo reinventar el hilo negro).

Pueden descargarlo aquí

Ver Demo

Saludos…

Otros Enlaces Relacionados:

¿Te pareció interesante la nota?, registrate a nuestro Feed para que estes al dia con las últimas notas que publicamos en WebAdictos, tambien te invitamos a explorar nuestros archivos tal vez encuentres notas y recursos que te sean de utilidad.

Si lo prefieres puedes utilizar el botón de post aleatorio para ir saltando entre nuestros contenidos.
Gracias por visitarnos.

Visto 1440 veces, 4 el dia de hoy
Viernes, 13 de Abril de 2007 a las 6:13 pm
Herramientas, Javascript, Librerias, Proyectos | wong it!
cargar-archivo, CSS, Javascript, libreria
Trackback

Efecto de Marquesina Hacia Arriba En Javascript
Septiembre 8th, 20074:13 pm

[...] Incluye tus Archivos JS y CSS Cuando los necesites [...]

Include en Javascript
Noviembre 14th, 20073:47 pm

[...] un tiempo ya habia publicado un script que incluia archivos javascript y css mediante el DOM, y ahora debido a un proyecto que realize la simplifique un poco, al fin y al cabo lo que se busca [...]

Actualidad, Entretenimiento y Humor » Include en Javascript
Noviembre 14th, 20073:48 pm

Jonathan
Diciembre 4th, 20073:07 pm

Es curioso no ver comentarios de desarrolladores, acerca del funcionamiento de esta librería, en todo caso, a mi no me funciona con el todos deseáramos no existiera, IE.

dmedina
Diciembre 4th, 20073:37 pm

Hola Jonathan porque no te funciona?? algun error en particular? tambien te comento que ya existe una “nueva versión” de la libreria es mucho mas sencilla de utilizar te paso la liga:

http://www.webadictos.com.mx/2007/11/14/include-en-javascript/

Saludos