JavaScript Espere a que se cargue la página

1. Use Event Listener para esperar a que la página se cargue en JavaScript
2. Use el evento window.onload para esperar a que la página se cargue en JavaScript

La publicación de hoy enseñará cómo esperar a que una página se cargue completamente en JavaScript.

Use Event Listener para esperar a que la página se cargue en JavaScript

El método addEventListener() de la interfaz EventTarget configura una función que se llamará cada vez que el evento especificado se entregue al objetivo.

El método addEventListener() funciona agregando una función u objeto que implementa el EventListener a la lista de detectores de eventos para el tipo de evento especificado en el EventTarget para el que se llama.

Si la función o el objeto ya está en la lista de detectores de eventos para ese destino, la función o el objeto no se agrega por segunda vez.

El método removeEventListener() de la interfaz EventTarget elimina un detector de eventos que se registró previamente del objetivo mediante EventTarget.addEventListener().

Echemos un vistazo al ejemplo a continuación.

<div>
  <p>
    Welcome to wait for page load blog post.
  </p>
</div>

window.addEventListener(
    'load', () => {alert('Hello World.This page is loaded!')});

La función de detector de eventos se registra en la ventana del ejemplo anterior. Este detector de eventos espera a que la página se cargue por completo antes de alertar al usuario de que la página está cargada.

Intente ejecutar el siguiente código en su navegador; mostrará el siguiente resultado.

Producción:

Use el evento window.onload para esperar a que la página se cargue en JavaScript

La propiedad onload del mixin GlobalEventHandlers es un controlador de eventos que maneja los eventos de carga en un elemento window, XMLHttpRequest, img, etc.

El evento de carga se activa cuando se ha cargado un recurso específico.

El evento de carga se activa al final del proceso de carga del documento. Todos los objetos del documento están en el DOM y todas las imágenes, scripts, enlaces y subtramas se han cargado por completo.

La única diferencia entre ambas soluciones es que window.onload, en navegadores recientes, no activa window.onload cuando usa los botones de historial atrás/adelante. Por el contrario, los oyentes son despedidos cada vez.

<div>
  <p>
    Welcome to wait for page load blog post.
  </p>
</div>

window.onload = function() {
  console.log('Hola!.This page is loaded!')
};

Producción :

"Hola!.This page is loaded!"

Demostración aquí