En mi sitio web, estoy cargando jQuery de forma asíncrona.
Para hacer eso, debo ejecutar las funciones de jQuery solo después de que esté realmente cargado.
He probado dos formas puras de JS:
<script src="js/jquery-2.2.2.min.js" async></script> <script> window.addEventListener('load', function() { //stuff }, true); </script>Y
window.onload = function() { //stuff } Pero aun así me sigue Uncaught TypeError: $(...) is not a function at...
¿Cómo activo las funciones de jQuery después de que la lib esté completamente cargada?
Debe agregar la secuencia de comandos solo después de cargar la biblioteca jQuery con la etiqueta de secuencia de comandos.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script> // your code should be here alert(typeof jQuery) </script>El controlador listo para documentos se utiliza para ejecutar el código solo después de cargar los elementos DOM.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script> console.log('Outside document ready handler ' + $('.test').length) $(document).ready(function() { console.log('Inside document ready handler ' + $('.test').length) }); </script> <div class="test"></div> ACTUALIZACIÓN 1: puede usar defer si el script está en un archivo, consulte la siguiente pregunta: jquery cargado asíncrono y la función lista no funciona
ACTUALIZACIÓN 2: O puede vincular el controlador de eventos de load a la etiqueta del script usando el método addEventListener .
<script async id="script" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript"> document.getElementById('script') .addEventListener('load', function() { alert(typeof jQuery) }); </script> FYI: no sé por qué está haciendo esto, para optimizar la velocidad de carga de contenido, siempre es mejor mover las etiquetas de script al final del body lo que ayuda a cargar el contenido primero.
Podrías hacer algo como esto:
function checkVariable(){ if ( window.jQuery){ Do your jquery stuff here } else{ window.setTimeout("checkVariable();",100); } } checkVariable();Disculpas por el formateo... atascado en mi teléfono ahora mismo.
No vi este método en la lista, así que pensé en demostrar el uso de JavaScript HTML DOM EventListener .
Ejemplo #1 usando el método jQuery.ready() :
<p id="test-jquery">jQuery Not Loaded</p> <script> $(document).ready(function() { var elem = $('#test-jquery'); elem.text('jQuery Is Loaded'); }); </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>Este método no funcionará ya que jQuery aún no se ha cargado. Ejecutar el ejemplo anterior generará:
ERROR: { "message": "ReferenceError: $ is not defined", "filename": "https://stacksnippets.net/js", "lineno": 13, "colno": 3 }Ejemplo #2 Usando el método addEventListener() :
<p id="test-jquery">jQuery Not Loaded</p> <script> window.addEventListener('DOMContentLoaded', function() { var elem = $('#test-jquery'); elem.text('jQuery Is Loaded'); }); </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>Este método funcionará ya que estamos escuchando el evento Window DOMContentLoaded .
De Mozilla :
El destino original de este evento es el Documento que se cargó. Puede escuchar este evento en la interfaz de Windows para manejarlo en las fases de captura o burbujeo. Para obtener detalles completos sobre este evento, consulte la página en el documento: evento DOMContentLoaded .
Solo se debe usar un evento diferente, load , para detectar una página completamente cargada. Es un error común usar la carga donde DOMContentLoaded sería más apropiado.