H5+JS implémente une animation de chargement de page-tutoriel HTML-php.cn

H5+JS implémente une animation de chargement de page

青灯夜游

Libérer： 2021-01-27 19:12:14

avant

5286 Les gens l'ont consulté

Cet article vous présentera comment implémenter une animation de chargement de page à l'aide de HTML5+JavaScript. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

H5+JS implémente une animation de chargement de page

(Tutoriels associés recommandés : tutoriel HTML)

1. Utilisez une minuterie et attendez à chaque fois.

2. Déterminez si l'animation de chargement se terminera selon que le chargement de la page est terminé.

<script>
        document.onreadystatechange=function(){
            console.log(document.readyState);
            if(document.readyState=="complete"){
                $(".loading").fadeOut();
            }
        }        
     </script>

Copier après la connexion

3. Les deux ci-dessus utilisent directement des images GIF Afin d'accélérer le chargement de la page Web, utilisez CSS3 pour créer des animations de lecture

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS3进度条</title>
    <style>
            .loading{width:100%; height: 100%;position: fixed;top:0;left: 0;z-index: 100;background: #ffffff;}
            .loading .pic{
            width: 64px;
            height: 64px;
            /* background: url(images/loading.gif); */
            position: absolute;
            top: 0;
            bottom: 0;
            left:0;
            right:0;
            margin: auto}
 
            .loading .pic i{
                display: block;
                float: left;
                width: 6px;
                height: 50px;
                background: #399;
                margin: 0 2px;
                transform: scaleY(0.4);
                animation: load 1.2s infinite;
            }
            .loading .pic i:nth-child(1){animation-delay:0.1s }
            .loading .pic i:nth-child(2){animation-delay:0.2s }
            .loading .pic i:nth-child(3){animation-delay:0.3s }
            .loading .pic i:nth-child(4){animation-delay: 0.4s}
            .loading .pic i:nth-child(5){animation-delay:0.5s }
 
            @keyframes load{
                0%,40%,100%{transform: scaleY(0.4)}
                20%{transform:scaleY(1) }
            }
    </style>
</head>
<body>
        
        <div>
            <div>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
            </div>
        </div>
    <img src="http://i1.hdslb.com/bfs/archive/763293ce06bf1e684ef0ea3da43ae5008d8564b8.jpg" alt=""/>
    <img src="http://i1.hdslb.com/bfs/archive/763293ce06bf1e684ef0ea3da43ae5008d8564b8.jpg" alt=""/>
    <img src="http://i1.hdslb.com/bfs/archive/763293ce06bf1e684ef0ea3da43ae5008d8564b8.jpg" alt=""/>
    <img src="http://i1.hdslb.com/bfs/archive/763293ce06bf1e684ef0ea3da43ae5008d8564b8.jpg" alt=""/>
</body>
</html>

Copier après la connexion

L'effet est le suivant

<. 🎜>

H5+JS implémente une animation de chargement de page

4. En fonction de la progression du chargement de la page en temps réel, le pourcentage de chargement est affiché

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>实时获取加载数据的进度条</title>
    <style>
        .loading {
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 100;
            background: #ffffff;
        }
 
        .loading .pic {
            width: 100px;
            height: 100px;
            /* background: url(images/loading.gif); */
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            /* border: 1px solid red; */
            font-size: 30px;
            text-align: center;
            line-height: 100px;
        }
 
        .loading .pic span{
            display: block;
            width: 80px;
            height: 80px;
            position: absolute;
            top:10px;
            left: 10px;
            border-radius: 50%;
            box-shadow: 0 3px 0 #666;
            animation: rotate 1s infinite linear;
        }
        @keyframes rotate{
            0%{transform: rotate(0deg);}
            100%{transform: rotate(360deg);}
        }
            
    </style>
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script>
         $(function(){
             var img=$("img");
             var num=0;
             img.each(function(i){
                 var oImg=new Image();
 
                 oImg.onload=function(){
                     oImg.onload=null;
                     num++;
                     $(".loading b").html(parseInt( num/$("img").size()*100)+"%");
                     if(num>=i){
                         $(".loading").fadeOut();
                     }
                 }
                 oImg.src=img[i].src;
             });       
    })
 
 
    </script>
</head>
 
<body>
    <div>
        <div>
            <span></span>
            <b>0%</b>
        </div>
    </div>
    <img src="http://i1.hdslb.com/bfs/archive/763293ce06bf1e684ef0ea3da43ae5008d8564b8.jpg" alt="" />
    <img src="http://i1.hdslb.com/bfs/archive/763293ce06bf1e684ef0ea3da43ae5008d8564b8.jpg" alt="" />
    <img src="http://i1.hdslb.com/bfs/archive/763293ce06bf1e684ef0ea3da43ae5008d8564b8.jpg" alt="" />
    <img src="http://i1.hdslb.com/bfs/archive/763293ce06bf1e684ef0ea3da43ae5008d8564b8.jpg" alt="" />
</body>
 
</html>

Copier après la connexion

L'effet est le suivant Parce que le chargement est trop rapide, prenez un. capture d'écran de la page initiale de l'animation. Le code de style écrit par

H5+JS implémente une animation de chargement de page