1. Idée : ajoutez beaucoup d'images pour retarder le temps de chargement et afficher les images après le chargement. Définissez un calque externe p pour couvrir l'image, introduisez l'image affichée lors du chargement dans le calque interne p, centrez le calque interne p sur la page, utilisez la minuterie setInterval pour définir le calque externe p après 3 secondes, puis masquez le calque externe p. calque p pour afficher l’image. Afficher l’effet de la page après le chargement.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.loading{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 100;
background: #fff;
}
.loading .pic{
width: 64px;
height: 64px;
background: url(loading.gif);
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
</style>
</head>
<body>
<img src="http://img5.imgtn.bdimg.com/it/u=4244789527,2286705620&fm=200&gp=0.jpg">
<img src="http://img5.imgtn.bdimg.com/it/u=4224538646,2973769633&fm=200&gp=0.jpg">
<img src="http://img2.imgtn.bdimg.com/it/u=3965705221,2010595691&fm=27&gp=0.jpg">
<img src="http://img4.imgtn.bdimg.com/it/u=1742626185,2547278809&fm=27&gp=0.jpg">
<img src="http://img0.imgtn.bdimg.com/it/u=3597382613,1842885761&fm=27&gp=0.jpg">
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(function(){
var loading='<p class="loading"><p class="pic"></p></p>';
$('body').append(loading);
setInterval(function(){
$('.loading').fadeOut();
},3000)
})
</script>
</body>
</html>Copier après la connexion
Points de connaissances :
p Centrage :
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
Copier après la connexion
2.
Idée : utiliser la méthode de surveillance des événements d'état : onreadystatechange, juger redayState et obtenir l'effet d'afficher la page après le chargement
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.loading{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 100;
background: #fff;
}
.loading .pic{
width: 64px;
height: 64px;
background: url(loading.gif);
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
</style>
</head>
<body>
<p class="loading">
<p class="pic"></p>
</p>
<img src="http://img5.imgtn.bdimg.com/it/u=4244789527,2286705620&fm=200&gp=0.jpg">
<img src="http://img5.imgtn.bdimg.com/it/u=4224538646,2973769633&fm=200&gp=0.jpg">
<img src="http://img2.imgtn.bdimg.com/it/u=3965705221,2010595691&fm=27&gp=0.jpg">
<img src="http://img4.imgtn.bdimg.com/it/u=1742626185,2547278809&fm=27&gp=0.jpg">
<img src="http://img0.imgtn.bdimg.com/it/u=3597382613,1842885761&fm=27&gp=0.jpg">
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
document.onreadystatechange=function(){
if(document.redayState=='complete'){
$('loading').fadeOut();
}
}
</script>
</body>
</html>Copier après la connexion
Points de connaissance :
Surveillez l'état de readyState via l'événement onreadystatechange. Nous devons uniquement nous soucier du dernier statut « terminé ». Lorsque l'état complet est atteint, cela signifie que le chargement est réussi.
3.
Idée : Utilisez CSS3 pour obtenir des effets d'animation et afficher la page après le chargement. La même méthode de surveillance de l'événement onreadystatechange est utilisée, mais la différence est qu'un effet dynamique est obtenu.
Utilisez la balise i et ajoutez des styles CSS pour obtenir 5 rectangles espacés. Utilisez l'animation pour boucler toutes les 1,2 s, boucle infinie. Chaque balise i s'étire et se raccourcit dans la direction Y avec un délai de 0,1 s pour obtenir un effet d'animation.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.loading{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 100;
background: #fff;
}
.loading .pic{
width: 50px;
height: 50px;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
.loading .pic i{
display: block;
float: left;
width: 6px;
height: 50px;
background: #399;
margin: 0 2px;
-webkit-transform: scaleY(0.4);
-ms-transform: scaleY(0.4);
transform: scaleY(0.4);
-webkit-animation: load 1.2s infinite;
animation: load 1.2s infinite;
}
.loading .pic i:nth-child(2){
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s;
}
.loading .pic i:nth-child(3){
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.loading .pic i:nth-child(4){
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
.loading .pic i:nth-child(5){
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
@-webkit-keyframes load{
0%,40%,100%{
-webkit-transform: scaleY(0.4);
transform: scaleY(0.4);
}
20%{
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
}
@keyframes load{
0%,40%,100%{
-webkit-transform: scaleY(0.4);
transform: scaleY(0.4);
}
20%{
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
}
</style>
</head>
<body>
<p class="loading">
<p class="pic">
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</p>
</p>
<img src="http://img5.imgtn.bdimg.com/it/u=4244789527,2286705620&fm=200&gp=0.jpg">
<img src="http://img5.imgtn.bdimg.com/it/u=4224538646,2973769633&fm=200&gp=0.jpg">
<img src="http://img2.imgtn.bdimg.com/it/u=3965705221,2010595691&fm=27&gp=0.jpg">
<img src="http://img4.imgtn.bdimg.com/it/u=1742626185,2547278809&fm=27&gp=0.jpg">
<img src="http://img0.imgtn.bdimg.com/it/u=3597382613,1842885761&fm=27&gp=0.jpg">
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
document.onreadystatechange=function(){
if(document.redayState=='complete'){
$('loading').fadeOut();
}
}
</script>
</body>
</html>Copier après la connexion
Points de connaissance :
1.échelle : allongement et raccourcissement. échelleX:x direction. échelleY : direction y.
2.infini : boucle infinie
3.animate-delay : 0,1 s retard 0,1 s
4.@nom de l'animation keyframes{
0 %{
}
100 %{
}
}
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)
