En este artículo, veremos cómo usar la función ready() proporcionada por la biblioteca jQuery . La función ready() se usa para ejecutar algún código javascript solo cuando el HTML DOM está completamente cargado. No debemos manipular el DOM hasta que esté completamente cargado. El método ready() es muy útil para detectar cuándo el DOM se carga correctamente.
Sintaxis:
$(selector).ready(handler)
Aquí ‘handler’ es una función de JavaScript que se ejecutará una vez que el DOM esté listo. El selector dentro de los paréntesis no importa. Por ejemplo, las tres sintaxis siguientes significan lo mismo.
Ejemplo: en el siguiente ejemplo, estamos cambiando el texto de h1 a «DOM ahora está listo» con la ayuda de la función ready() que se activa cuando DOM está completamente cargado.
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
</head>
<body>
<h1></h1>
<script>
$.holdReady(true);
setTimeout(() => {
$.holdReady(false);
}, 2000);
function onDOMReady() {
$().ready(() => {
$("h1").text("DOM is now ready");
});
}
onDOMReady();
</script>
</body>
</html>
Salida: aquí estamos usando la función holdReady() para mantener el evento DOM ready durante 2 segundos, de modo que podamos simular el retraso en la carga DOM para probar la función ready() .
