Evento de carga de Javascript: ¿cómo saber si el script ya está cargado?

Question

¿Cómo puedo usar javascript para determinar si un HTMLScriptElement ya se ha cargado por completo?

¿Cómo puedo determinar si un script de carga dinámica se ha terminado de cargar sin utilizando el proceso de carga o eventos de cambio onreadystate?

código es el siguiente:

TOOL.loadScript = function (url, callback, reappend, deepSearch) { 
     var head, curr, child, tempScript, alreadyAppended, queue, 
     alreadyHandled, script, handler, loadFunc; 

     head = document.getElementsByTagName("head")[0]; 
     tempScript = document.createElement("script"); 
     tempScript.src = url; 
     alreadyAppended = false; 

     queue = []; 

     if (deepSearch) { 
     // search entire document 
     queue.push(document.firstElementChild); 
     } 
     else { 
     // just search the head element 
     queue.push(head); 
     } 

     while (queue.length !== 0) { 
     curr = queue.shift(); 

     // add child nodes to queue 
     child = curr.firstElementChild; 
     if (child !== null && child !== undefined) { 
      queue.push(child); 
      child = child.nextElementSibling; 
      while (child !== null && child !== undefined) { 
       queue.push(child); 
       child = child.nextElementSibling; 
      } 
     } 

     if (curr.tagName !== null && curr.tagName !== undefined) { 
      if (curr.tagName.toLowerCase() === "script" && curr.src === tempScript.src) { 
       script = curr; 
       alreadyAppended = true; 
       break; 
      } 
     } 
     } 

     if (!alreadyAppended) { 
     script = document.createElement("script"); 
     script.type = "text/javascript"; 
     script.async = true; 
     script.src = url; 
     } 

     alreadyHandled = false; 

     handler = function (event) { 
     console.log("handling event..."); 
     if (!alreadyHandled) { 
      if ((!event.readyState) || (event && (event.readyState === "loaded" || event.readyState === "complete"))) { 
       alreadyHandled = true; 
       callback.apply(script, [url]); 
       if (loadFunc) { 
        loadFunc.apply(script, arguments); 
       } 
      } 
     } 
     }; 

     if (script.onreadystatechange === undefined) { 
     loadFunc = script.onload; 
     script.onload = handler; 
     } 
     else { 
     loadFunc = script.onreadystatechange; 
     script.onreadystatechange = handler; 
     } 

Necesito ayuda aquí. Quiero que la función de devolución de llamada se active incluso si alreadyAppeneded === true y el mismo script ya estaba cargado, pero solo si el script está completamente terminado de cargarse.

 if (!alreadyAppended || (alreadyAppended && reappend)) { 
     head.appendChild(script); 
     } 
    }; 

CONCLUSIÓN: ¿Cómo determinar si un script ha terminado de cargarse? Por favor, hágame preguntas si es necesario.

Gracias.

Answer 1

Implementación diferida: Cree una matriz que puede usar para insertar la fuente de todos los scripts cargados y, a medida que se cargan, insertarlos en la lista. Cada vez, verifique si el src dado está en la matriz, y si lo está, active la devolución de llamada inmediatamente.

Lo que hace con el caso cuando se anexa, pero no se carga, se convierte en la pregunta. Si desea que la devolución de llamada se active, pero desea que se active después de que se cargue, puede hacer una matriz asociativa con un src como clave y el elemento de script como el valor. A partir de ahí, hacer que el proceso de carga o onreadystatechange fuego dos veces envolviendo el original, así:

var temponload = element.onreadystatechange || element.onload; 
if (element.onreadystatechange === undefined) 
    element.onload = function(e) { temponload(); temponload(); }; 
else 
    element.onreadystatechange = function (e) { temponload(); temponload(); }; 

Usted tiene otro código que puede necesitar para enganchar en esto, pero esto debe empezar con suerte.

Answer 2

No se puede decir realmente cuándo se ha cargado una secuencia de comandos. Puede colocar una variable global en el script que desea verificar y luego probar su presencia.

Hay un nuevo proyecto llamado LABjs (Cargando y Bloqueando Javascript) para cargar scripts dinámicamente y así decir cuándo están realmente cargados (http://blog.getify.com/2009/11/labjs-new- hotness-for-script-loading/< - compruébalo)

Answer 3

¿Por qué no agregar un id al elemento script? Verifique si el ID existe antes de continuar ....

function includeJs(jsFilePath) { 

    if (document.getElementById(jsFilePath+"_script")) { 
    return; 
    } 
    var js = document.createElement("script"); 

    js.type = "text/javascript"; 
    js.id = jsFilePath+"_script"; 
    js.src = jsFilePath; 

    document.body.appendChild(js); 
}