JavaScript espera a que se cargue la página

Las páginas web o los sitios que visita a menudo permiten que el usuario espere para mostrar un mensaje importante o una advertencia antes de acceder a un componente en particular. Por ejemplo, al pedirle a un usuario que compre la membresía o iniciar sesión antes de acceder al contenido del sitio o para la gestión del tráfico apropiada en el caso de los sitios web educativos. En tales casos, puede dejar que el usuario espere una página hasta que se cargue.

Este blog discutirá las metodologías que se pueden usar para establecer el tiempo de carga de la página en JavaScript.

Cómo esperar a que se cargue una página en JavaScript?

Puede esperar a que una página se cargue en JavaScript utilizando los siguientes enfoques:

• • Evento de Onload de ventana con "setTimeout ()" método
  • Evento de Onload de ventana con "setInterval ()" método
  • "addEventListener ()" método

Los conceptos mencionados se demostrarán uno por uno!

Método 1: Espere a que se cargue la página en JavaScript usando Window.Evento de Onload con el método setTimeOut ()

El "ventana.encendido"El evento ocurre cuando se ha cargado la ventana y el"setTimeout ()El método "invoca una función después de la hora establecida específica. Más específicamente, estos enfoques se pueden combinar para cargar la ventana después del tiempo de espera especificado.

Sintaxis

setTimeOut (función, milisegundos)

En la sintaxis dada, la función se refiere a la función accedida "Waitload ()", Y Millisegunds indica el"fijar tiempo"En milisegundos.

El ejemplo a continuación demuestra el concepto declarado.

Ejemplo

En primer lugar, utilice el "ventana.encendido"Evento junto con el"setTimeout ()Método para cargar la ventana después de la hora establecida en milisegundos. El tiempo de espera especificado se aplicará a la función Waitload ():

ventana.onload = setTimeout (Waitload, 3000)

Ahora, defina la función llamada "Waitload ()"En la etiqueta. Se accederá a esta función en particular en la carga de la ventana y notificará al usuario los siguientes mensajes a través de la alerta y en el modelo de objeto de documento (DOM), respectivamente:

función waitload ()
alerta ("Cargada!")
documento.escribir ("Esta página está cargada ahora!")
;

Se puede observar que la página se carga después del tiempo de espera especificado de 3 segundos:

Si desea cargar la página después de un tiempo de espera especificado repetidamente, utilice el siguiente método.

Método 2: Espere a que se cargue la página en JavaScript usando la ventana.Evento de Onload con el método SetInterval ()

El "ventana.encendido"El evento, como se discutió anteriormente, se activa cuando la ventana se ha cargado. El "setInterval ()El método "accede a una función especificada repetidamente en los intervalos de tiempo especificados calculados en milisegundos.

Sintaxis

setInterval (función, milisegundos)

Aquí el "función"Se refiere a la función que debe ejecutarse y"milisegundos"Es su intervalo de tiempo establecido.

Ejemplo

En el siguiente ejemplo, estableceremos el intervalo de tiempo como argumento en la función definida. Imprima un mensaje específico a través de una alerta en el DOM después de cada 3 segundos cuando la página se cargue repetidamente:

ventana.onload = setInterval (function ()
alerta ("Cargada!")
documento.escribir ("Esta página está cargada ahora!")
, 3000);

Producción

En la salida extraída, es evidente que la página se carga repetidamente después del tiempo de espera especificado.

Método 3: Espere a que la página se cargue en JavaScript usando el método addEventListener ()

El "addEventListener ()El método "aplica un controlador de eventos al documento. Este método se puede implementar para adjuntar un evento en particular y cargar la página al hacer clic en cualquier lugar del DOM.

Sintaxis

documento.addEventListener (evento, función)

En la sintaxis dada, "evento"Se refiere al evento que se activará y"función"Señala la función que realiza cierta funcionalidad en el evento activado.

Ejemplo

Primero, adjuntaremos un evento "hacer clic"Para el documento utilizando el método addEventListener (). Al activar el evento especificado, la función nombrada "Waitload ()" será ejecutado:

documento.addEventListener ("Haga clic", Waitload)

Defina la función "Waitload ()"En el que muestre el siguiente mensaje en el DOM en el evento activado:

función waitload ()
documento.escribir ("la página está cargada ahora!");

En esta salida en particular, la página se carga al hacer clic en el cursor en cualquier lugar del DOM:

Hemos compilado diferentes métodos para esperar a que se cargue la página.

Conclusión

Para esperar para cargar una página en JavaScript, utilice el ventana.encendido evento con el "setTimeout ()"Método con"setInterval ()"Método o el"addEventListener ()" método. La ventana.El evento de Onload con el método setTimeOut () se usa para cargar la página después del tiempo especificado mientras con el método setInterval (), la página se carga repetidamente después del intervalo de tiempo particular. El método addEventListener () se puede utilizar para adjuntar un evento y cargar la página tan pronto como se active el evento en el DOM. Este artículo ilustró los métodos para esperar a que se cargue una página en JavaScript.