JavaScript attendez que la page se charge

Les pages Web ou les sites que vous visitez permettent souvent à l'utilisateur attendre d'afficher un message important ou un avertissement avant d'accéder à un composant particulier. Par exemple, lorsque vous demandez à un utilisateur d'acheter l'adhésion ou de se connecter avant d'accéder au contenu du site ou pour la gestion appropriée du trafic dans le cas des sites Web éducatifs. Dans de tels cas, vous pouvez laisser l'utilisateur attendre une page jusqu'à ce qu'elle soit chargée.

Ce blog discutera des méthodologies qui peuvent être utilisées pour définir le temps de chargement de la page dans JavaScript.

Comment attendre qu'une page se charge en JavaScript?

Vous pouvez attendre qu'une page se charge en JavaScript en utilisant les approches suivantes:

• • Événement de charge de fenêtre avec "setTimeout ()" méthode
  • Événement de charge de fenêtre avec "setInterval ()" méthode
  • "addEventListener ()" méthode

Les concepts mentionnés seront démontrés un par un!

Méthode 1: Attendez la page pour se charger en javascript à l'aide de la fenêtre.Événement Onload avec la méthode setTimeout ()

Le "fenêtre.en charge»L'événement se produit lorsque la fenêtre a été chargée, et le« «setTimeout ()»La méthode invoque une fonction après l'heure définie spécifiée. Plus précisément, ces approches peuvent être combinées pour charger la fenêtre après le temps d'attente spécifié.

Syntaxe

setTimeout (fonction, millisecondes)

Dans la syntaxe donnée, la fonction fait référence à la fonction consultée "Téléchargement d'attente ()», Et des millisecondes indiquent le«régler le temps"En millisecondes.

L'exemple donné ci-dessous démontre le concept déclaré.

Exemple

Tout d'abord, utilisez le «fenêtre.en charge«Événement avec le«setTimeout ()”Méthode pour charger la fenêtre après l'heure définie en millisecondes. Le temps d'attente spécifié sera appliqué à la fonction Waitload ():

fenêtre.onLoad = setTimeout (charge d'attente, 3000)

Maintenant, définissez la fonction nommée «Téléchargement d'attente ()"Dans la balise. Cette fonction particulière sera accessible sur la charge de la fenêtre et informez l'utilisateur avec les messages suivants via alerte et sur le modèle d'objet de document (DOM), respectivement:

Function Waitload ()
alerte ("chargé!")
document.Écrire ("Cette page est chargée maintenant!")
;

On peut observer que la page est chargée après le temps d'attente spécifié de 3 secondes:

Si vous souhaitez charger la page après un temps d'attente spécifié à plusieurs reprises, utilisez la méthode suivante.

Méthode 2: Attendez que la page se charge en javascript à l'aide de la fenêtre.Événement Onload avec la méthode setInterval ()

Le "fenêtre.en charge»L'événement, comme indiqué ci-dessus, est déclenché lorsque la fenêtre a été chargée. Le "setInterval ()»La méthode accède à une fonction spécifiée à plusieurs reprises aux intervalles de temps spécifiés calculés en millisecondes.

Syntaxe

setInterval (fonction, millisecondes)

Ici le "fonction»Fait référence à la fonction qui doit être exécutée et«millisecondes"Est son intervalle de temps défini.

Exemple

Dans l'exemple suivant, nous définirons l'intervalle de temps comme argument dans la fonction définie. Imprimez un message spécifique via une alerte sur le DOM après toutes les 3 secondes lorsque la page est chargée à plusieurs reprises:

fenêtre.onload = setInterval (function ()
alerte ("chargé!")
document.Écrire ("Cette page est chargée maintenant!")
, 3000);

Sortir

Dans la sortie extraite, il est évident que la page est chargée à plusieurs reprises après le temps d'attente spécifié.

Méthode 3: Attendez la page pour se charger en JavaScript à l'aide de la méthode AddeveventListener ()

Le "addEventListener ()»La méthode applique un gestionnaire d'événements au document. Cette méthode peut être implémentée pour joindre un événement particulier et charger la page en cliquant n'importe où dans le DOM.

Syntaxe

document.AddeventListener (événement, fonction)

Dans la syntaxe donnée, "événement»Fait référence à l'événement qui sera déclenché et«fonction”Pointe la fonction qui remplit certaines fonctionnalités sur l'événement déclenché.

Exemple

Tout d'abord, nous joindrons un événement "Cliquez sur”Au document à l'aide de la méthode AddeventListener (). En déclenchant l'événement spécifié, la fonction nommée «Téléchargement d'attente ()«Sera exécuté:

document.addEventListener ("cliquez", charge d'attente)

Définir la fonction "Téléchargement d'attente ()«Dans lequel affichez le message suivant sur le DOM sur l'événement déclenché:

Function Waitload ()
document.Écrire ("La page est chargée maintenant!");

Dans cette sortie particulière, la page est chargée en cliquant sur le curseur n'importe où sur le DOM:

Nous avons compilé différentes méthodes pour attendre que la page se charge.

Conclusion

Pour attendre pour charger une page en javascript, utilisez le fenêtre.en charge événement avec le «setTimeout ()"Méthode, avec"setInterval ()«Méthode ou le«addEventListener ()" méthode. La fenêtre.L'événement Onload avec la méthode setTimeout () est utilisé pour charger la page après l'heure spécifiée avec la méthode SetInterval (), la page se charge à plusieurs reprises après l'intervalle de temps particulier. La méthode addEventListener () peut être utilisée afin de joindre un événement et de charger la page dès que l'événement est déclenché sur le DOM. Cet article a illustré les méthodes pour attendre qu'une page se charge en JavaScript.