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…
Pingback: chido.blogsmexico.com
Pingback: meneame.net
Pingback: Fresqui.com
Pingback: WebAdictos - Una dosis diaria de web@ » Archivo del Blog » Comprimir Tus Archivos Javascript
Pingback: Actualidad, Entretenimiento y Humor » Comprimir Tus Archivos Javascript
Pingback: Consejos para agilizar la carga de una página
Pingback: Actualidad, Entretenimiento y Humor » Consejos para agilizar la carga de una página
Pingback: Actualidad, Entretenimiento y Humor » Consejos para agilizar la carga de una página
Pingback: www.teknear.com
Pingback: Efecto de Marquesina Hacia Arriba En Javascript
Pingback: Include en Javascript
Pingback: Actualidad, Entretenimiento y Humor » Include en Javascript