la espera de secuencia de comandos de carga dinámica

Question

En mi cuerpo de la página, tengo que insertar este código como el resultado de una llamada AJAX:

<p>Loading jQuery</p> 
    <script type='text/javascript' src='scripts/jquery/core/jquery-1.4.4.js'></script> 
    <p>Using jQuery</p> 
    <script type='text/javascript'> 
     $.ajax({ 
      ... 
     }); 
    </script> 

no puedo usar $.load() ya que el documento ya se ha cargado, por lo que el caso no dispara

¿Esto es seguro? Si no, ¿cómo me aseguro de que el script jquery se haya cargado antes de que se ejecute mi código personalizado generado?

Answer 1

Es bastante seguro. Históricamente, las etiquetas <script> tienen un bloqueo completo, por lo tanto, la segunda etiqueta <script> no se puede encontrar antes de que la primera haya terminado de analizar/escupir. El único problema podría ser que los navegadores "modernos" tienden a cargar scripts de forma asíncrona y diferida. Así que para asegurarse de que la orden es correcta, utilizar de esta manera:

<p>Loading jQuery</p> 
<script type='text/javascript' async=false defer=false src='scripts/jquery/core/jquery-1.4.4.js'></script> 
<p>Using jQuery</p> 
<script type='text/javascript'> 
    $.ajax({ 
     ... 
    }); 
</script> 

Sin embargo, es probable que sea una idea mejor que utilizar la inserción de etiquetas de script dinámicas en lugar de empujar esto como cadena HTML en el DOM. Sería la misma historia

var scr = document.createElement('script'), 
    head = document.head || document.getElementsByTagName('head')[0]; 
    scr.src = 'scripts/jquery/core/jquery-1.4.4.js'; 
    scr.async = false; // optionally 

head.insertBefore(scr, head.firstChild); 

Answer 2

$ .ajax y $ .load son lo mismo. Puedes usar cualquiera. Si coloca $ .load en una etiqueta de script en la página, se activará cuando se cargue como $ .ajax().

Cuando se trata de esperar a que un guión al fuego antes de hacer algo lo Tomalak dijo es un poco cierto. La excepción son las llamadas asíncronas. Javascript realizará una llamada AJAX y luego continuará ejecutando el script y cuando responda la llamada AJAX ejecutará el éxito/error dependiendo de lo que le diga que haga.

Ahora diga que quiere que su JS espere la devolución, con una sola llamada es muy fácil simplemente envolver todo en la devolución de llamada exitosa, o puede hacerlo de una manera genial y usar $ .deferido. Esto le permite hacer un montón de llamadas ajax o una y luego ejecutar algún código solo después del final.

$ .cuando & $ .then son probablemente la mejor para esta situación.

De cualquier manera, lo que estás haciendo es seguro.

Answer 3

Hay también nueva característica de jQuery 1.6. Se llama jQuery.holdReady(). En realidad se explica por sí mismo; cuando llame al jQuery.holdReady(true), el evento ready no se activará hasta que llame al jQuery.holdReady(false). Establecer esto en falso no activará automáticamente un evento listo, simplemente elimina la retención.

Aquí es un ejemplo no-bloqueo de alguna secuencia de comandos tomada de la documentación:

$.holdReady(true); 
$.getScript("myplugin.js", function() { 
    $.holdReady(false); 
}); 

Ver http://api.jquery.com/jQuery.holdReady/ para más información

Answer 4

Añadir un ID de archivo de script para que pueda consultarlo.

<script id="hljs" async src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.0.0/highlight.min.js"></script> 

A continuación, añadir un detector de carga a ella en JavaScript

<script> 
    var script = document.querySelector('#hljs'); 
    script.addEventListener('load', function() { 
    hljs.initHighlightingOnLoad(); 
    }); 
</script>