Cargar scripts dinámicamente

caerolus · #1 (**permalink**) 07/09/2008, 08:24

Hola a todos. Estoy empezando a trabajar con carga dinámica de scripts:

Código PHP:

  function loadScript(path){ 
    script = document.createElement('script'); 
    script.type = 'text/javascript'; 
    script.src = path; 
    document.getElementsByTagName('head')[0].appendChild(script); 
}

De esa forma no hace falta cargar todo el sitio entero al principio, y se pueden ir cargando los scripts necesarios a medida que se vayan necesitando.
El problema es que, según me parece a mí, nada más ejecutar esa función los nuevos objetos cargados no están disponibles aun.
Por ejemplo, si en foo.js tengo un objeto llamado fu:

Código PHP:

  loadScript('foo.js'); 
fu.algo();

No ejecuta bien, supongo que por el tiempo que tarde en cargar ese script. Si vuelvo a ejecutarlo otra vez, entonces ya sí va (porque ya cargó el script anteriormente).
¿Alguna idea para solventar esto? Algo así como parar la ejecución hasta que se carguen los scripts (no algo como esperar siempre 5 segundos o así).
Gracias!

Panino5001 · #2 (**permalink**) 08/09/2008, 02:41

Podrías verificar si los elementos han cargado antes de llamarlos, con algo como esto:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>test</title> 
<script> 
var scrs=['algo.js','algo3.js','algo2.js']; 
var cargados=0; 
function adjs(url){ 
     
    sc=document.createElement('script'); 
    if(sc.addEventListener) 
        sc.addEventListener('load',function(){cargados++},false); 
    else 
        sc.onreadystatechange=function(){ 
            if(sc.readyState=='complete' || sc.readyState=='loaded')cargados++; 
    } 
     
    
    sc.src=url; 
    document.getElementsByTagName('body')[0].appendChild(sc); 
}  
function loadScript(){ 
for(var i=0;i<scrs.length;i++){ 
    adjs(scrs[i]); 
} 
} 
window.onload=function(){ 
    loadScript(); 
    var int=setInterval(function(){if(scrs.length==cargados){alert('todos cargados');clearInterval(int)}},200) 
} 
</script> 
</head> 
 
<body> 
</body> 
</html>

caerolus · #3 (**permalink**) 08/09/2008, 04:57

Cita:

Iniciado por Panino5001

Podrías verificar si los elementos han cargado antes de llamarlos, con algo como esto:

Muchas gracias, eso era lo que necesitaba, los eventos. Al final lo he dejado así, por si a alguien le interesa:

Código PHP:

  dynamicLoader = { 
    callback: null, 
    /** 
     * Dynamically loads the component indicated (if it wasn't loaded before). 
     * The component does not need to tell the loader that it's ready. 
     * @param component The component's name. 
     * @param callback The function to be called when loading is finished. 
     */ 
    load: function(component, callback){ 
        this.callback = callback; 
        // Check whether the component was already loaded 
        var already = false; 
        var scripts = document.getElementsByTagName('script'); 
        for (var i = 0; i < scripts.length && !already; i++) { 
            if (scripts[i].src == SITEURL + '/rpc.php?mod=DynamicLoad&act=' + component)  
                already = true; 
        } 
        if (!already) { 
            // component not loaded yet 
            var script = document.createElement("script"); 
            script.type = "text/javascript"; 
            script.src = SITEURL + '/rpc.php?mod=DynamicLoad&act=' + component; 
            // add event to call the callback when the script is loaded 
            if (script.addEventListener) { 
                // for firefox-like browsers 
                script.addEventListener('load', function(){ 
                    console.log('Script loaded: addEventListener'); 
                    dynamicLoader.done(); 
                }, false); 
            }else { 
                // for IE browsers 
                script.onreadystatechange = function(){ 
                    console.log('Script loaded: onreadystatechange=', script.readyState); 
                    if (script.readyState == 'complete' || script.readyState == 'loaded')  
                        dynamicLoader.done(); 
                } 
            } 
            document.getElementsByTagName("head")[0].appendChild(script); 
        } 
        else { 
            // component already loaded. Just call the callback 
            dynamicLoader.done(); 
        } 
    }, 
    /** 
     * Tell the dynamic loader to call the callback function after a module is loaded. 
     */ 
    done: function(){ 
        if (this.callback)  
            this.callback(); 
        this.callback = null; 
    } 
};

Se llama a load con el nombre del componente y la función a llamar cuando termine. El componente se carga desde una url específica en mi caso, cambiarlo con lo que uséis.