Cómo asegurarme de que jQuery está disponible

por

Vale, vale, ya se…jQuery. Que está pasado de moda y obsoleto. Pero la realidad es que se sigue usando en montones de proyectos. Y, en muchas ocasiones se usa mal.

Por cierto, esto se puede aplicar a jQuery o a cualquier otro objeto JavaScript que necesites para que funcione tu código.

Seguramente habrás añadido miles de veces este código porque te han contado que eso son las buenas prácticas:

$(document).ready(function() {
   // Aquí tu código
});

o el más moderno:

$(function() {
  // Handler for .ready() called.
});

Esto es importante porque así nos aseguramos de que no se ejecuta nada de código hasta que el DOM esté completamente cargado.

Pero es posible que, en ocasiones, veas este mensaje (o algo parecido):

$ is not a funcion

Y seguro que te extrañará un montón porque ves que el fichero js con el contenido de jQuery sí que está cargado.

¿Y por qué puede no cargarse jQuery?

Este problema puede surgir en algunos escenarios en los que tu código JavaScript está en un fichero separado del código jQuery (sí, no en todos los proyectos podemos usar cosas como WebPack).

En situaciones como ésta puede darse el caso de que tu fichero se cargue antes que el de jQuery y se lance antes.

Hay múltiples estrategias para solucionar esto, incluida la de lanzar tu código dentro de un window.onload:

function miCodigo() {
}

window.onload = miCodigo();

El problema de este método es que su código solo se ejecutará cuando se haya cargado absolutamente todo de la página (todos los JS, CSS e imágenes). A veces esto no es una opción por temas de experiencia de usuario (o yo qué se) y puede que necesites que tu código se ponga en marcha lo antes posible.

Esperar a jQuery

Una solución que he usado en algunas ocasiones ha sido este sencillo script y te lo dejo por si te puede ser útil:

function esperar() {
    if (window.jQuery) {
         $(function() {
         // Aquí lanza el código que necesita jQuery
         });
    }
    else {
         window.setTimeout(esperar, 10);
    }
}

esperar();

Esta función se seguirá ejecutando hasta que jQuery esté disponible y nada más. En ese momento esperamos a que el DOM esté listo.

Y, por supuesto, vale para jQuery o para cualquier otra cosa.

¿Se te ocurre alguna otra opción?

Deja un comentario