Blog: Desarrollo web
Inicio > Blog > Desarrollo web
Carga dinámica de JavaScript
Publicado el: 17/05/2011 en: Desarrollo web | Añadir Comentario
A medida que nos sumergimos en la web 2.0, los sitios que encontramos son más y más elaborados, no sólo estéticamente sino funcionalmente.
Hojas de estilo complejas, multitud de imagenes, grandes librerías Javascript…
Parte del tiempo de carga requerido por todos esos archivos se puede paliar cargándolos dinámicamente, bajo demanda, cuando realmente sean necesarios. A continuación describo una forma de hacer esto con archivos Javascript.
El siguiente código permite llamar a funciones que no se hayan cargado con la página, exactamente de la misma forma que si hubiesen sido cargadas.
El script que se carga inicialmente ha de proveer las funciones que se usarán en la página. Pero en lugar de implementar su código real consistirán en una llamada a una función de carga de scripts.
Así conseguimos reducir el tiempo inicial de carga, y cargar a posteriori exclusivamente los scripts que realmente necesitemos.
El ejemplo consiste en dos ficheros, primero “test.html”:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es" dir="ltr">
<head>
<title>javascript load on demand</title>
<script type="text/javascript">
<!--
function loadScript(scrPath, callback, context){
var scrId = 'jsframe_script_' + scrPath.replace(/[^a-zA-Z\d_]+/, '');
if(document.getElementById(scrId)){
return(false); //ya cargado
}
if(!context) var context = this;
var script = document.createElement('script');
script.id = scrId;
//script.charset = "windows-1250";
script.type = 'text/javascript';
script.src = scrPath; //relativo o absoluto, ej: 'http://path.to.javascript/file.js'
if(script.readyState){ //IE
script.onreadystatechange = function(){
if(script.readyState == "loaded" || script.readyState == "complete"){
script.onreadystatechange = null;
return((function(cb, ctx){
return(cb.call(ctx));
})(callback, context));
}
};
}
else{
script.onload = function(){
return((function(cb, ctx){
return(cb.call(ctx));
})(callback, context));
};
}
var h = document.getElementsByTagName("head").length ? document.getElementsByTagName("head")[0] : document.body;
h.appendChild(script);
}
function loadMethod(method, args, library){
var tempCall = (function (obj, as){
return(function (){eval('obj.' + method + '.apply(obj, as);');});
})(this, args);
if(!library){
alert("Can't load " + method);
}
loadScript(library, tempCall, this);
}
function fTest(){return(loadMethod('fTest', arguments, 'test.js'));}
-->
</script>
</head>
<body>
<h1>javascript dinamically load, by jmanuel@2mdc.com</h1>
<p><a href="#" onclick="fTest();">click here</a></p>
</body>
</html>
Finalmente el fichero JavaScript que será cargado on-demand, “test.js”:
function fTest(){
alert('scripts auto-load test');
}
Véase también | Carga dinámica de JavaScript (2)
(4 voto(s), media: 3.75 sobre 5)
Deja tu comentario
Tags HTML Permitidos:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>