1

No puedo detectar cuando la pagina se cargo completamente. Primero trate con este codigo y funciona correctamente:

let stateCheck = setInterval( ()=>{
    if (document.readyState === 'complete') {
          clearInterval(stateCheck);
          console.log('Funciona')
    }
}, 100);

Pero cuando no uso el set interval no me funciona, ¿ por que ?:

if (document.readyState === 'complete') {
     console.log('Funciona')
}
Mateo Guio
  • 625
  • 14
  • 1
    No funciona porque, al momento de ejecutar ese bloque de código, la página aún no ha cargado en su totalidad, mientras que con `setInterval()` analizas el estado cada 100 milisegundos. Lo más adecuado es detectar la carga por un evento, como el que te sugieren en la respuesta. – Triby Jan 28 '22 at 20:04

1 Answers1

3

Puedes utilizar un EventListener de javascript puro:

<script>
  window.addEventListener("load", function(event) {
    console.log("La página ha terminado de cargar");
  });
</script>

Básicamente, realiza algún bloque de código que determines cuando todos los recursos de la página se han cargado. ¡Saludos!

L. Ronquillo
  • 2,476
  • 2
  • 14
  • 35
  • 1
    Excelente, gracias, debo esperar 8 minutos para marcar como correcta bro :) – Mateo Guio Jan 28 '22 at 16:50
  • !un placer ayudar! :D – L. Ronquillo Jan 28 '22 at 16:52
  • 3
    Conviene diferenciar entre `window` (toda la ventana) y `document` (el DOM). El código de esta respuesta escucha la carga de la ventana completa. Si te interesa escuchar la carga del DOM, lo propio es usar [`DOMContentLoaded`](https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event). Para más detalles y entender la diferencia entre `window` y `document` [ver esta respuesta](https://es.stackoverflow.com/a/51961/29967). – A. Cedano Jan 28 '22 at 17:00
  • 2
    Es importante tenerlo en cuenta, sobre todo por motivos de rendimiento. Acabo de probar el snippet de la respuesta referida anteriormente y **hay una diferencia de 10 segundos** entre la carga del `DOM` y la carga de `window`. Por tanto, un código que escuche el `window`, cuando debería escuchar el `DOM` no está **optimizado**. Se debe esperar la carga del `window` únicamente si necesitas trabajar con elementos que están en él dentro de tu bloque de código (imágenes, iframes, etc). – A. Cedano Jan 28 '22 at 17:05
  • Amigo puedes puntear la pregunta como util por favor, nunca he preguntado, es para obtener la medalla de estudiante – Mateo Guio Jan 28 '22 at 17:40
  • 2
    @A.Cedano, de acuerdo a la pregunta, `readyState == 'complete'` es equivalente al evento `load`, [referencia](https://developer.mozilla.org/es/docs/Web/API/Document/readyState). Por otra parte, no sé si haya diferencia entre al analizar la carga completa entre ventana y documento, sería cuestión de probar. – Triby Jan 28 '22 at 20:02
  • 1
    @Triby, yo me refiero a esta respuesta, donde se escucha a `window`. Y en cuanto a si hay diferencia, la hay, sobre todo si `window` carga un iframe. [Si revisas el snippet de la respuesta](https://es.stackoverflow.com/questions/51946/cu%c3%a1l-es-la-diferencia-entre-window-onload-y-document-ready/51961#51961) podrás ver a la derecha el momento en que cada uno notifica que está completo. – A. Cedano Jan 28 '22 at 22:41
  • 1
    @A.Cedano, acabo de hacer unas pruebas y `readyState == 'complete'` se dispara casi al mismo tiempo que `load` de la ventana, ambos esperan a que se hayan cargado todos los recursos del documento, que es el comportamiento esperado por OP, al menos eso entiendo con _"el documento fue cargado completamente"_. – Triby Jan 28 '22 at 22:59