zoukankan      html  css  js  c++  java

  • 网站loading的几种实现方法


    1、

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    *{
    padding:0;
    margin:0;
    }
    .loading{
    height:100%;
    100%;
    position: fixed;
    #fff;
    z-index: 1000;
    }
    .loading .pic{
    160px;
    height:20px;
    background:url(./img/loading.gif);
    position: absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    margin:auto;
    }
    </style>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script>
    $(function(){
    $('body').append()
    setTimeout(function(){
    $('.loading').fadeOut()
    },3000)
    })
    </script>
    </head>
    <body>
    <div>
    <div></div>
    </div>
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1565938420,1502042431&fm=200&gp=0.jpg" alt="">
    <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3270585678,1405391765&fm=27&gp=0.jpg" alt="">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2906071610,811972283&fm=27&gp=0.jpg" alt="">
    <img src=https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1129568991,2883037091&fm=27&gp=0.jpg" alt="">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    </body>
    </html>

    2、

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    *{
    padding:0;
    margin:0;
    }
    .loading{
    height:100%;
    100%;
    position: fixed;
    #fff;
    z-index: 1000;
    }
    .loading .pic{
    160px;
    height:20px;
    background:url(./img/loading.gif);
    position: absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    margin:auto;
    }
    </style>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script>
    document.onreadystatechange = function(){
    if(document.readyState=='complete'){
    $('.loading').fadeOut()
    }
    }
    </script>
    </head>
    <body>
    <div>
    <div></div>
    </div>
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1565938420,1502042431&fm=200&gp=0.jpg" alt="">
    <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3270585678,1405391765&fm=27&gp=0.jpg" alt="">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2906071610,811972283&fm=27&gp=0.jpg" alt="">
    <img src=https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1129568991,2883037091&fm=27&gp=0.jpg" alt="">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    </body>
    </html>

    3、

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    *{
    padding:0;
    margin:0;
    }
    .loading{
    height:100%;
    100%;
    position: fixed;
    #fff;
    z-index: 1000;
    }
    .loading .pic{
    50px;
    height:50px;
    position: absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    margin:auto;
    }
    .loading .pic i{
    display: block;
    float: left;
    6px;
    height:50px;
    background-color: #399;
    margin:0 2px;
    -webkit-transform: scale(0.4);
       -ms-transform: scale(0.4);
           transform: scale(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: scale(0.4); transform: scale(0.4); }
    20%{ -webkit-transform: scale(1); transform: scale(1); }
    }
    @keyframes load{
    0%,40%,100%{ -webkit-transform: scale(0.4); transform: scale(0.4); }
    20%{ -webkit-transform: scale(1); transform: scale(1); }
    }
    </style>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script>
    document.onreadystatechange = function(){
    if(document.readyState=='complete'){
    $('.loading').fadeOut()
    }
    }
    </script>
    </head>
    <body>
    <div>
    <div>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    </div>
    </div>
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1565938420,1502042431&fm=200&gp=0.jpg" alt="">
    <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3270585678,1405391765&fm=27&gp=0.jpg" alt="">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2906071610,811972283&fm=27&gp=0.jpg" alt="">
    <img src=https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1129568991,2883037091&fm=27&gp=0.jpg" alt="">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    </body>
    </html>

    4、

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    *{
    padding:0;
    margin:0;
    }
    .loading{
    height:100%;
    100%;
    position: fixed;
    #fff;
    z-index: 1000;
    }
    .loading .pic{
    0%;
    height:5px;
    position: absolute;
    left:0;
    top:0;
    background: #f33
    }

    </style>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

    </head>
    <body>
    <div>
    <div>
    </div>
    </div>
    <header>
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1565938420,1502042431&fm=200&gp=0.jpg" alt="">
    </header>
    <script>
    $('.loading .pic').animate({"10%"},100)
    </script>
    <section>
    <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3270585678,1405391765&fm=27&gp=0.jpg" alt="">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    </section>
    <script>
    $('.loading .pic').animate({"30%"},100)
    </script>
    <section>
    <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2906071610,811972283&fm=27&gp=0.jpg" alt="">
    <img src=https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1129568991,2883037091&fm=27&gp=0.jpg" alt="">
    </section>
    <script>
    $('.loading .pic').animate({"60%"},100)
    </script>
    <section>
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    </section>
    <script>
    $('.loading .pic').animate({"90%"},100)
    </script>
    <section>
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    </section>
    <footer>

    </footer>
    <script>
    $('.loading .pic').animate({"100%"},100,function(){
    $('.loading').fadeOut()
    })
    </script>


    </body>
    </html>

    5、

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    *{
    padding:0;
    margin:0;
    }
    .loading{
    height:100%;
    100%;
    position: fixed;
    #fff;
    z-index: 1000;
    }
    .loading .pic{
    100px;
    height:100px;
    position: absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    margin:auto;
    border:1px solid red;
    font-size:30px;
    text-align: center;
    line-height:100px;

    }
    .loading .pic span{
    display: block;
    80px;
    height:80px;
    position: absolute;
    top:10px;
    left:10px;
    border-radius:50%;
    box-shadow: 0 3px 0 #666;
    animation:rotate 1s infinite linear; 
    -webkit-animation:rotate 1s infinite linear; 
    }
    @keyframes rotate{
    0%{transform: rotate(0deg);}
    100%{transform: rotate(360deg);}
    }
    @-webkit-keyframes rotate{
    0%{-webkit-transform: rotate(0deg);}
    100%{-webkit-transform: rotate(360deg);}
    }
    </style>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script>
    $(function(){
    // var img = new Image()
    // img.onload = function(){

    // }
    // img.src='123.jpg'
    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').length*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="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=471732479,562853153&fm=27&gp=0.jpg" alt="">
    <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1565938420,1502042431&fm=200&gp=0.jpg" alt="">
    <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3270585678,1405391765&fm=27&gp=0.jpg" alt="">
    <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=164104570,3489576029&fm=27&gp=0.jpg" alt="">
    <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2906071610,811972283&fm=27&gp=0.jpg" alt="">
    <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1129568991,2883037091&fm=27&gp=0.jpg" alt="">

    <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=502325189,2728483660&fm=27&gp=0.jpg" alt="">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3887715991,2420229997&fm=27&gp=0.jpg" alt="">

    </html>
  • 相关阅读:
    Fast Member
    C++箴言：理解typename的两个含义
    网上资源工具
    WeakReference
    MonoGame教程
    The RAII Programming Idiom
    OpenGL Common Mistakes
    Finalize()、Dispose()、SafeHandle、GC
    Interop with Native Libraries
    C++计算几何库
  • 原文地址：https://www.cnblogs.com/zhangshuda/p/7640178.html
Copyright © 2011-2022 走看看