JavaScript Attendere la pagina da caricare

Le pagine Web o i siti visitati spesso consentono all'utente di aspettare un messaggio importante o un avviso prima di accedere a un particolare componente. Ad esempio, quando chiede a un utente di acquistare l'adesione o l'accesso prima di accedere al contenuto del sito o per la gestione del traffico appropriata in caso di siti Web educativi. In tali casi, puoi consentire all'utente di attendere una pagina fino a quando non viene caricato.

Questo blog discuterà le metodologie che possono essere utilizzate per impostare il tempo di caricamento della pagina in JavaScript.

Come aspettare che una pagina si carichi in JavaScript?

Puoi attendere che una pagina si carichi in JavaScript utilizzando i seguenti approcci:

• • Evento di finestra Onload con “setTimeout ()" metodo
  • Evento di finestra Onload con “setInterval ()" metodo
  • "addEventListener ()" metodo

I concetti menzionati saranno dimostrati uno per uno!

Metodo 1: attendere che la pagina si carichi in JavaScript usando la finestra.Evento Onload con metodo setTimeout ()

IL "finestra.Onload"L'evento si verifica quando la finestra è stata caricata e il"setTimeout ()"Il metodo invoca una funzione dopo il tempo di impostazione specificata. Più specificamente, questi approcci possono essere combinati per caricare la finestra dopo il tempo di attesa specificato.

Sintassi

setTimeout (funzione, millisecondi)

Nella sintassi data, la funzione si riferisce alla funzione accessibile "Waitload ()", E millisecondi indica il"tempo impostato"In millisecondi.

L'esempio seguente dimostra il concetto dichiarato.

Esempio

In primo luogo, utilizza il "finestra.OnloadEvento "insieme al"setTimeout ()"Metodo per caricare la finestra dopo il tempo impostato in millisecondi. Il tempo di attesa specificato verrà applicato alla funzione Waitload ():

finestra.Onload = setTimeout (Waitload, 3000)

Ora, definisci la funzione denominata "Waitload ()"Nel tag. A questa particolare funzione sarà accessibile al carico della finestra e avviserà all'utente i seguenti messaggi tramite avviso e sul modello di oggetti documenti (DOM), rispettivamente:

funzione waitload ()
Avviso ("Caricato!")
documento.Scrivi ("Questa pagina è carica ora!")
;

Si può osservare che la pagina viene caricata dopo il tempo di attesa specificato di 3 secondi:

Se si desidera caricare ripetutamente la pagina dopo un tempo di attesa specificato, utilizza il seguente metodo.

Metodo 2: attendere che la pagina si carichi in JavaScript usando la finestra.Evento Onload con metodo setInterval ()

IL "finestra.Onload"L'evento, come discusso sopra, viene attivato quando la finestra è stata caricata. IL "setInterval ()"Il metodo accede ripetutamente una funzione specificata agli intervalli di tempo specificati calcolati in millisecondi.

Sintassi

setInterval (funzione, millisecondi)

Qui, il "funzione"Si riferisce alla funzione che deve essere eseguita e"millisecondi"È il suo intervallo di tempo impostato.

Esempio

Nel seguente esempio, imposteremo l'intervallo di tempo come argomento nella funzione definita. Stampa un messaggio specifico tramite un avviso sul DOM ogni 3 secondi quando la pagina viene caricata ripetutamente:

finestra.onload = setInterval (function ()
Avviso ("Caricato!")
documento.Scrivi ("Questa pagina è carica ora!")
, 3000);

Produzione

Nell'output estratto, è evidente che la pagina viene caricata ripetutamente dopo il tempo di attesa specificato.

Metodo 3: attendere che la pagina si carichi in javascript utilizzando il metodo addEventListener ()

IL "addEventListener ()"Il metodo applica un gestore di eventi al documento. Questo metodo può essere implementato per allegare un evento particolare e caricare la pagina facendo clic in qualsiasi parte del DOM.

Sintassi

documento.addEventListener (evento, funzione)

Nella sintassi data, "evento"Si riferisce all'evento che verrà attivato e"funzione"Indica la funzione che esegue alcune funzionalità sull'evento attivato.

Esempio

Innanzitutto, alletteremo un evento "clic"Al documento utilizzando il metodo AddeventListener (). Dopo aver innescato l'evento specificato, la funzione denominata "Waitload ()"Sarà eseguito:

documento.addEventListener ("Click", Waitload)

Definire la funzione "Waitload ()"In cui visualizzare il seguente messaggio sul DOM sull'evento attivato:

funzione waitload ()
documento.Scrivi ("La pagina è carica ora!");

In questo particolare output, la pagina viene caricata facendo clic sul cursore ovunque sul DOM:

Abbiamo compilato diversi metodi per attendere il caricamento della pagina.

Conclusione

Per aspettare di caricare una pagina in JavaScript, utilizzare il finestra.Onload evento con il "setTimeout ()Metodo ", con"setInterval ()Metodo o il "addEventListener ()" metodo. La finestra.L'evento Onload con il metodo setTimeout () viene utilizzato per caricare la pagina dopo il tempo specificato durante il metodo setInterval (), la pagina si carica ripetutamente dopo l'intervallo di tempo particolare. Il metodo addEventListener () può essere utilizzato per allegare un evento e caricare la pagina non appena l'evento viene attivato sul DOM. Questo articolo ha illustrato i metodi per attendere che una pagina si carichi in JavaScript.