JavaScript - ¿Cómo me aseguro de que se cargue jQuery?

Tengo una página web. Cuando se carga esta página web, quiero ejecutar algo de JavaScript. Este JavaScript usa JQuery. Sin embargo, parece que cuando se carga la página, la biblioteca jQuery no se ha cargado por completo. Debido a esto, mi JavaScript no se ejecuta correctamente.JavaScript - ¿Cómo me aseguro de que se cargue jQuery?

¿Cuáles son algunas de las mejores prácticas para garantizar que su biblioteca jQuery se cargue antes de ejecutar su JavaScript?

Fuente

2009-07-12 Villager

Publique código de ejemplo –

La biblioteca jQuery deben incluirse en la parte <head> de su página:

<script src="/js/jquery-1.3.2.min.js" type="text/javascript"></script>

su propio código debe venir después de esto. JavaScript se carga de forma lineal y sincrónica, por lo que no debe preocuparse siempre que incluya los scripts en orden.

Para hacer que el código se ejecuta cuando el DOM ha terminado de cargar (porque realmente no se puede utilizar gran parte de la biblioteca jQuery hasta que esto suceda), hacer esto:

$(function() { 
    // Do stuff to the DOM 
    $('body').append('<p>Hello World!</p>'); 
});

si va a mezclar los marcos de JavaScript y están interfiriendo entre sí, puede que tenga que usar jQuery así:

jQuery(function ($) { // First argument is the jQuery object 
    // Do stuff to the DOM 
    $('body').append('<p>Hello World!</p>'); 
});

Fuente

2009-07-12 21:38:04 Blixt

¡De manera simultánea, es una mala práctica cargar bibliotecas de terceros sincrónicamente! Si depende del orden en el que se cargan, se recomienda incluir el script ** al final del cuerpo **, por lo que no se bloquea el procesamiento, y aún se carga de forma síncrona, p. Los scripts que se incluyen después se ejecutan después de la ejecución de este. – Andy

Coloque el código después de la jQuery y hacer esto

$(document).ready({ // your code });

Fuente

2009-07-12 21:38:52

Este código depende de la existencia de jQuery en el DOM. El DOM ya puede estar cargado, pero desea cargar jQuery después del hecho, dinámicamente. Si ese es el caso, su línea no se ejecutará si la biblioteca jQuery no se ha cargado, y el navegador del cliente simplemente se sentará allí y no hará nada. Por lo tanto, debe haber algún bucle en el script dinámico, para verificar la existencia de jQuery antes de pasar al siguiente paso. – TARKUS

Puede haber dos problemas. Primero, debe asegurarse de que jQuery esté incluido antes de cualquier script que lo use. Esto puede ser complicado si tiene javascript incrustado en parciales. Si carga jQuery en el encabezado y todas sus otras secuencias de comandos en un bloque de scripts al final del cuerpo, puede estar seguro de que jQuery está cargado antes que su otro código. Intento poner todo en el extremo del cuerpo, con jQuery siendo el primer script cargado.

En segundo lugar, debe asegurarse de que el DOM esté completamente cargado antes de intentar usarlo en sus scripts. jQuery proporciona un método listo para esto. Envuelva su código dentro del método listo y puede estar (más) seguro de que el DOM está disponible para que usted pueda trabajar. No todas las imágenes pueden cargarse, pero debería estar bien con todo lo demás. Para las imágenes, puede que tenga que esforzarse más para asegurarse de que estén cargadas si eso es crítico para su código.

<script type='text/javascript' src='.../path-to-jquery/jquery.js'></script> 
$(document).ready(function() { 
    ...your code here... 
});

o (abreviada)

<script type='text/javascript' src='.../path-to-jquery/jquery.js'></script> 
$(function() { 
    ... your code here... 
});

Fuente

2009-07-12 21:40:12 tvanfosson

Estoy en la misma situación y no puedo estar seguro de que jquery esté completamente cargado o no. Como $ (document) .ready() no funciona y no pude escribir el código "si jquery no está cargado, cárguelo de nuevo". ¿Hay alguna forma de lograr esto? – uzay95

En general, sólo tiene que utilizar el siguiente "documento cargado" básica de prueba en jQuery. Directamente desde el beginners jquery tutorial:

$(document).ready(function() { 
    // do stuff when DOM is ready 
});

puedo pensar en ninguna razón por la que esto no debe trabajar, sin duda hay millones de sitios que utilizan jQuery que se basa precisamente en este fragmento de código.

Fuente

2009-07-12 21:41:37

A veces utilizamos scripts de cliente que, por sí solos, no cargan jquery. Estos son simples scripts bootstrap que cargan un script remoto.Es en el script remoto donde quiero cargar mis bibliotecas externas, como jQuery. Por lo tanto, tengo que hacer algunas modificaciones DOM dinámicas, como agregar scripts jQuery después del hecho. Es en estos scripts remotos donde encontrará los problemas abordados por esta pregunta. – TARKUS

Cuando un navegador encuentra un elemento script se bloquea lo que significa que todo el tiempo que tiene un elemento script que carga jQuery antes de cualquier secuencia de comandos que quiere usar jQuery, que debe estar bien, por ejemplo,

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script> 
    // jQuery is available 

    $(document).ready(function(){ 
     // ... 
    }); 
</script>

Ver JavaScript Load Order para algunos comentarios adicionales sobre este tema.

Fuente

2009-07-12 21:43:16

Ya hay varias respuestas, cada una de ellas funciona bien, pero todas dependen de asegurarse de que jQuery se descargue sincrónicamente antes de que las dependencias intenten usarlo. Este enfoque es muy seguro, pero también puede presentar una ineficiencia ya que no se pueden descargar/ejecutar otros recursos mientras se descarga y analiza la secuencia de comandos de la biblioteca jQuery. Si coloca jQuery en la cabeza con una etiqueta incrustada, el navegador de los usuarios estará inactivo mientras descarga y procesa jQuery cuando podría estar haciendo otras cosas como descargar imágenes, descargar otras secuencias de comandos, etc.

Si usted está buscando rapidez de respuesta en el arranque, cada milisegundo cuenta.

Una gran ayuda para mí durante el último año ha sido Steve Souders, primero cuando estaba en Yahoo, y ahora en Google. Si tiene tiempo, revise sus diapositivas para Even Faster Web Sites y High Performance Web Sites. Excelente. Para una gran paráfrasis, continúe aquí.

Cuando adjuntar archivos JavaScript al DOM, se ha encontrado que poner en línea < guión > etiqueta en la cabeza < > del documento hace que la mayoría de los navegadores para bloquear mientras que el archivo está siendo descargado y analizado. IE8 y Chrome son excepciones. Para evitar esto, puede crear un elemento "script" a través de document.createElement, establecer los atributos adecuados y luego adjuntarlo al encabezado del documento. Este enfoque no se bloquea en ningún navegador importante.

<script type='text/javascript'> 
    // Attaching jQuery the non-blocking way. 
    var elmScript = document.createElement('script'); 
    elmScript .src = 'jQuery.js'; // change file to your jQuery library 
    elmScript .type = 'text/javascript';   
    document.getElementsByTagName('head')[0].appendChild(elmScript); 
</script>

Esto asegura que jQuery, mientras que la descarga y el análisis, no está bloqueando la descarga y análisis de cualquier otra imagen o JavaScript archivos. Pero esto podría presentar un problema si tiene un script que depende de que jQuery termine su descarga antes de que lo haga jQuery. jQuery no estará allí y obtendrá un error que dice $ o jQuery no está definido.

Por lo tanto, para asegurarse de que su código se ejecutará, debe hacer alguna comprobación de dependencia. Si sus dependencias no se cumplen, espere un momento y vuelva a intentarlo.

<script type='text/javascript'> 
runScript(); 

function runScript() { 
    // Script that does something and depends on jQuery being there. 
    if(window.$) { 
     // do your action that depends on jQuery. 
    } else { 
     // wait 50 milliseconds and try again. 
     window.setTimeout(runScript, 50); 
    } 
} 
</script>

Como dije antes, no hay problemas con los enfoques que se muestran anteriormente, todos son válidos y todo funciona. Pero este método asegurará que no esté bloqueando la descarga de otros elementos en la página mientras espera jQuery.

Este enfoque funcionará para cualquier archivo, por lo que si tiene que incluir archivos de 10 js, puede adjuntar cada uno de ellos con este método. Solo tiene que asegurarse de que su función de verificación compruebe todas las dependencias antes de ejecutar.

Fuente

2009-07-14 12:44:56

¡Respuesta fantástica, ojalá pudiera votar más! Estoy usando esta técnica ahora y funciona muy bien. (Por cierto, parece que puede tener un error tipográfico con un espacio no deseado en 'elmScript .src' y' elmScript .type'.) –

me gusta esta respuesta. también resuelvo mi problema en la pregunta de antera publicada. – murvinlai

Si '$' es utilizado por otra biblioteca de JavaScript, asegúrese de reemplazarlo con 'jQuery'. – lordcheeto

JavaScript - ¿Cómo me aseguro de que se cargue jQuery?

Respuesta

Cuestiones relacionadas