JavaScript DOM listo

1. Utilice la función jQuery ready() para llamar a funciones cuando DOM esté listo
2. Enfoque vainilla de JavaScript para llamar a funciones cuando DOM está listo

La carga de un sitio web comienza con la descarga del documento HTML. Una vez que se descarga el documento HTML, se analiza el HTML y se descargan los elementos necesarios. Una vez analizado el HTML, el DOM y el CSS se representan en paralelo. Después de esto, el navegador se encarga de las funciones onload de JavaScript. Este es el período de tiempo al que queremos llamar funciones porque HTML, CSS, DOM se representan correctamente. Este tutorial enseña cómo llamar a una función cuando el DOM está listo.

Utilice la función jQuery ready() para llamar a funciones cuando DOM esté listo

La función ready() en jQuery ejecuta el código cuando el DOM está listo. Espera a que todos los elementos estén completamente cargados y luego intenta acceder a ellos y manipularlos. Podemos seleccionar el elemento document, un elemento vacío para llamar a una función, o incluso llamar directamente a una función.

$(document).ready(function() {
  // callback function / handler
});

Es un método compatible con todos los navegadores y se puede llamar desde cualquier parte del código HTML.

Enfoque vainilla de JavaScript para llamar a funciones cuando DOM está listo

Podemos crear el equivalente en JavaScript de la función ready() de jQuery usando el evento DOMContentLoaded. Podemos agregar un detector de eventos para DOMContentLoaded y llamar a nuestra función deseada con ese detector de eventos. Pero hay un problema, la devolución de llamada no se activará si el evento ya ha ocurrido. Por lo tanto, nos ocupamos de esta condición comprobando el estado listo del objeto del documento.

const callback = function() {};

if (document.readyState === 'complete' ||
    document.readyState === 'interactive') {
  setTimeout(callback, 1);
} else {
  document.addEventListener('DOMContentLoaded', callback);
}

Hay pocos trucos además de estos métodos que nos ayudan a resolver este problema, pero pueden no ser ideales en todos los casos.

• Utilice el atributo onload de la ventana para llamar a la función JavaScript.
• Utilice el atributo onload del cuerpo para llamar a la función JavaScript. Este método puede ser terriblemente lento, ya que espera a que se carguen todos los elementos.
• Podemos llamar a la función a ejecutar desde el final del cuerpo. Al final del cuerpo, DOM está correctamente renderizado y listo. Por lo tanto, no hay problemas con las llamadas a funciones relacionadas con ningún elemento. Funciona mucho más rápido que el controlador body onload porque no espera a que las imágenes se carguen por completo.