Au lieu d'afficher un écran blanc ou noir entier pendant le chargement de la page, un indicateur de chargement s'affiche, ce qui améliore également l'expérience utilisateur de l'application.
Maintenant, il existe des bibliothèques qui peuvent afficher des indicateurs de chargement. Cependant, nous pouvons créer un div d’indicateur de chargement personnalisé en utilisant HTML et CSS.
Dans ce tutoriel, nous utiliserons HTML, CSS et JavaScript pour afficher le div de chargement de la page jusqu'à ce que la page soit chargée
Utilisez l'événement onreadystatechange pour afficher l'indicateur de chargement lors du chargement de la page
En JavaScript, chaque fois que l'état de la page Web change, l'événement onreadystatechange sera déclenché. Le premier état est « interactif », ce qui signifie que la page Web interagit et a commencé à se charger. La deuxième étape est « Complète », c'est-à-dire que la page Web est chargée avec succès.
Nous pouvons ainsi masquer le corps du texte et afficher l'indicateur de chargement dans tous les autres états, et dans l'état "Terminé", nous pouvons masquer l'indicateur de chargement et afficher le corps du texte.
Grammaire
Les utilisateurs peuvent suivre la syntaxe suivante pour afficher et masquer l'indicateur de chargement en fonction de l'état du document.
document.onreadystatechange = function () {
if (document.readyState !== "complete") {
// show loading indicator and hide body
} else {
// show body, and hide loading indicator
}
};
Copier après la connexion
Dans la syntaxe ci-dessus, nous appellerons cette fonction chaque fois que l'état du document change. Il vérifie si l'état est "Terminé", puis masque l'indicateur de chargement et affiche le corps.
Exemple
Dans l'exemple ci-dessous, nous avons créé un div en utilisant le div « loading_indicator » et appliqué du CSS pour en faire un indicateur de chargement circulaire.
En JavaScript, nous utilisons l'événement onreadystatechange. Cette fonction est exécutée chaque fois que l'état change. Dans la fonction, nous utilisons la propriété "readyState" du document pour obtenir l'état actuel du document. Si l'état actuel du document est "Terminé", nous pouvons accéder et masquer l'indicateur de chargement et afficher l'intégralité du corps du document. Sinon, nous pouvons afficher l'indicateur de chargement et masquer le corps du document.
<html>
<head>
<style>
#loading_indicator {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
border: 10px solid grey;
border-radius: 50%;
border-top: 10px solid blue;
width: 100px;
height: 100px;
animation: spinIndicator 1s linear infinite;
}
@keyframes spinIndicator {
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<h2>Using the <i> onreadystatechange event </i> to show page loading div in JavaScript.</h2>
<div id = "loading_indicator"> </div>
<h3> Page Loaded successfully.</h3>
<img src = "https://www.tutorialspoint.com/static/images/logo-color-footer.png" alt = "image">
<script>
document.onreadystatechange = function () {
if (document.readyState !== "complete") {
document.querySelector("body").style.visibility = "hidden";
document.getElementById("loading_indicator").style.visibility = "visible";
} else {
setTimeout(() => {
document.getElementById("loading_indicator").style.display ="none";
document.querySelector("body").style.visibility = "visible";
}, 3000)
}
};
</script>
</body>
</html>
Copier après la connexion
Exemple
Dans l'exemple ci-dessous, nous utilisons jQuery pour afficher un indicateur de chargement lors du chargement de la page. Nous avons ajouté HTML et CSS au corps du document.
Dans JQuery, nous utilisons la méthode append() pour ajouter l'indicateur de chargement au corps du document. Après cela, nous utilisons l'événement "load" pour vérifier si la page a été chargée et sur cette base, nous supprimons l'indicateur de chargement de la page Web.
<html>
<head>
<style>
#indicator {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
border: 10px solid grey;
border-radius: 50%;
border-top: 10px solid red;
width: 100px;
height: 100px;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<h2>Using the <i> JQuery load event </i> to show page loading div in JavaScript.</h2>
<h3>Page Loaded successfully.</h3>
<img src = "https://www.tutorialspoint.com/static/images/logo-color-footer.png" alt = "image">
<script>
$('body').append('<div style = "" id = "indicator"> <div class="loader"> </div> </div>');
$(window).on('load', function () {
setTimeout(removeLoader, 2000);
});
function removeLoader() {
$("#indicator").fadeOut(1000, function () {
$("#indicator").remove();
});
}
</script>
</body>
</html>
Copier après la connexion
Nous avons appris à utiliser JavaScript et jQuery pour afficher un indicateur de chargement lors du chargement de la page. Dans le premier exemple, nous utilisons l'événement onreadystatechange de JavaScript pour afficher et masquer l'indicateur de chargement selon que la page est chargée ou non.
Dans le deuxième exemple, nous utilisons l'événement load de JQuery pour afficher et masquer l'indicateur de chargement
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
