Incluye tus Archivos JS y CSS Cuando los necesites
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;
-
}
-
}
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í
Saludos…
¿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.
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 [...]
Noviembre 14th, 20073:48 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 [...]
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.
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
Agosto 1st, 20081:02 pm
Me gustaria que publicaran como generar archivo pdf en forma aleatoria lo estoy haciendo con aplicaciones web con JSP ya que casi no encuentro informacion se los agradeceria muchp y porque he estado invetsigando y no encuentro nada