Otro de los conocimientos que forman parte del núcleo de jQuery es el uso de "ready", que nos permite ejecutar acciones de manipulación del DOM cuando el navegador está listo. Anteriormente en el Manual de jQuery lo hemos usado en repetidas ocasiones, pero no hemos desvelado aún todas sus variantes. Vamos a abordar este asunto que resulta básico pero importante.

Método nativo de Javascript para ejecutar código cuando el navegador está listo

Comenzamos con algo de conocimiento de Javascript "Vanilla" (Javascript nativo, sin uso de librerías). En este lenguaje tenemos diversos modos de colocar código Javascript que se ejecutará cuando el DOM está listo.

Para este caso usamos el evento DOMContentLoaded que nos ofrecen los navegadores. Los manejadores para el evento DOMContentLoaded se tienen que enganchar del objeto document del navegador, de esta manera:

document.addEventListener("DOMContentLoaded", function() {
    // El código que coloquemos aquí se ejecutará cuando el navegador está listo.
});

Ahora, casi todas las variantes que vamos a ver aquí serán similares aunque ni idénticas al método nativo con DOMContentLoaded. La circunstancia o diferencia que se puede dar es que si asociamos un manejador de evento a DOMContentLoaded después que el navegador esté listo, nunca se llegará a ejecutar, porque el evento ya se había disparado anteriormente. Sin embargo, los métodos basados en ready de jQuery, aunque el DOMContentLoaded ya se haya disparado, se ejecutarán siempre.

Método clásico con el evento ready()

El evento ready de jQuery lo podemos enganchar del objeto document del navegador mediante el método ready(). Esto lo hemos hecho ya muchas veces, por lo que no resultará nuevo para nosotros.

$(document).ready( function() {
  $('h2').css('font-weight', 'normal');
});

Una alternativa muy similar a la que acabamos de ver es la siguiente, en la que entregamos la cadena "document" en lugar del objeto documento.

$("document").ready(function () {
  $('h2').css('color', 'orange');
});

Incluso podemos usar la función dólar sin enviarle parámetro alguno, ejecutando luego el método ready() para asociar un código a ejecutar cuando el navegador está listo.

$().ready(function () {
  $('h2').text("Otro texto para el h2");
});

Pero no es la única manera, vamos ahora a ver otras variantes un poco diferentes a las anteriores.

Usar la función jQuery pasando otra función

Con la función $() una posibilidad es pasarle como parámetro una función y entonces lo que tenemos es una función callback que se invoca automáticamente cuando el DOM está listo.

Ejemplo:

$(function (){
   //Aquí puedo hacer cualquier cosa con el DOM
});

Este callback con la función jQuery $() sería una abreviatura de otro método que hemos visto repetidas veces a lo largo de este manual para definir acciones cuando el DOM está listo:

$(document).ready(function() {
   //Aquí puedo hacer cualquier cosa con el DOM
});

Incluso podemos hacer varios callback, para agregar distintas acciones a realizar cuando el DOM está listo, las veces que queramos, igual que cuando definíamos el evento ready() sobre el objeto document.

$(function () {
   var elem = $("p");
   elem.css("background-color", "#ff8833");
});

$(function () {
   var elem = $("b");
   elem.css("color", "#fff");
});

Método basado en promesas de jQuery 3

Por último queremos analizar un método basado en promesas, que fue incorporado con jQuery 3. Este método sirve para simplificar sobre todo el código de las llamadas Ajax, pero lo podemos usar también para asociar código en el document ready.

Comenzamos viendo la propiedad $.ready, que es un objeto que funciona como una promesa, que se resuelve cuando el DOM está listo.

$.ready por si solo no sirve de mucho, pero si lo combinamos con el método $.when() de jQuery, entonces podremos realizar acciones cuando se resuelve la promesa.

$.when($.ready).then( function() {
  // Aquí el DOM está listo para recibir acciones.
});

Ejemplo de las variantes del ready de jQuery

Vamos a acabar mostrando el código de una página donde estamos realizando, a modo experimental, el uso de todas las variantes del evento "ready" que hemos visto en este artículo.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Distintas maneras de hacer el document.ready</title>
  <script src="../../js/jquery-3.6.3.js"></script>
  <script>
    $(document).ready( function() {
      $('h2').css('font-weight', 'normal');
    });
    $("document").ready(function () {
      $('h2').css('color', 'orange');
    });
    $().ready(function () {
      $('h2').text("Otro texto para el h2");
    });
    $(function () {
      $('h2').css({ 
        'background-color': 'yellow',
        'padding': '10px'
      })
    });
    $.when($.ready).then( function() {
      $("h2").click( function() {
        $(this).slideUp();
      })
    });
  </script>
</head>
<body>
  <h2>Distintas maneras de hacer el document.ready</h2>

</body>
</html>

Esperamos que haya servido para ilustrar cómo debes proceder para ejecutar código de manipulación del DOM con la seguridad de saber que está listo para recibir acciones.

De hecho, hay un detalle relevante que quizás hayas observado y que, si no es así, queremos que veas. En los artículos anteriores del manual escribíamos siempre el código de jQuery antes de terminar el </body>. En el código anterior hemos colocado el script en el <head> de la página. No ha sido un capricho. Lo hemos hecho así para que veas que, aunque el código de Javascript está antes del código HTML del elemento que manipula, el funcionamiento es correcto. Esto es porque el acceso a la etiqueta <h2> se realizará solamente cuando el DOM esté totalmente cargado y listo para recibir instrucciones.

En el siguiente artículo de este manual vamos a explicar otro de los métodos del core fundamentales para trabajar con jQuery: each para realizar recorridos a colecciones.