加載中的效果製做

時間 2019-12-10

標籤加載效果製做简体版

原文原文鏈接

對於比較加載比較慢的頁面、大的圖片、後臺交互時間長等一系列須要等待的效果，加載中的提示出現會頗有必要。本文主要對加載中的css效果，和加載進度的各種狀況作一初步的調研。javascript

一、利用css3製做加載中的效果

css3能夠製做出很是漂亮的加載中的效果，這裏只列出幾個比較簡單的加載中的效果製做過程。
（1）豎線的進度條效果：利用分別設置5個<li>的高度變化php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
       .loading{
            width: 100px;
            height: 100px;
            border: 1px solid black;
       }
       .loading i{
               width:6px;
               height:50px;
               margin:0 2px;
               background:blue;
               display:inline-block;
               transform: scaleY(0.4);
               animation:loop 0.8s infinite;
               -webkit-animation:loop 0.8s infinite;
       }
       .loading i:nth-child(1){}
       .loading i:nth-child(2){
             animation-delay: 0.1s;
       }
       .loading i:nth-child(3){
             animation-delay: 0.2s;
       }
       .loading i:nth-child(4){
             animation-delay: 0.3s;
       }
       .loading i:nth-child(5){
             animation-delay: 0.4s;
       }

       @keyframes loop{
             0%,40%,100%{ transform: scaleY(0.4); }
          20%{ transform: scaleY(1); }
       }
    </style>
</head>
<body>
    <div class="loading">
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
    </div>
</body>
</html>

(2) 轉動的圓圈css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
       #loading{
             width: 100px;
             height: 100px;
             background: #FFFFFF;
             border: 1px solid black;
       }
       #loading .pic{
             width: 50px;
             height: 50px;
             border-radius: 50%;
             box-shadow: 0 2px 0 #666;
             animation: loop 1s infinite;
             -webkit-animation: loop 1s infinite;
       }
       @keyframes loop{
             0%{ transform: rotate(0deg); }
             100%{ transform: rotate(360deg ); }
       }
    </style>
</head>
<body>
    <div id="loading">
        <div class="pic"></div>
    </div>
</body>
</html>

二、利用頁面的加載狀態判斷

頁面加載狀態改變時的事件：document.onreadystatechange
當前文檔狀態：document.readystate
有以下的狀態：
（1）uninitialized-還未開始載入
（2）loading-載入中
（3）interactive-已加載，文檔能夠與用戶開始交互
（4）complete-載入完成html

document.onreadystatechange=function(){
            if(document.readyState=="complete"){
               $("loading").fadeOut()
            }
        }

三、文件上傳進度加載提示

onprogress事件是XMLHttpRequest的子對象XMLHttpRequestUpload中的一個事件。該事件每隔100ms向客戶端返回一次數據，包括文件已上傳的大小loaded和總大小total.java

xhr.upload.onprogress = function(evt){
  console.log(evt);  //evt是onprogress事件的對象
}

完整的html代碼以下：css3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- 外層div 進度條的總體視覺和位置設置 -->
    <div style="width:300px;height: 20px;border: 1px solid #CCC">
    <!-- 內層div  逐漸遞增的進度條 -->
        <div id="jdt" style="height: 20px"></div>
    </div><br>
    <form action="" method="post" id="mainForm">
        選擇文件：
        <input type="file" name="f">
        <input type="button" value="上傳" onclick="upload()">
    </form>
    <script type="text/javascript">
        function upload(){
            // 獲取表單對象
            var fm = document.getElementById("mainForm");
            // 實例化FormData對象
            var fd = new FormData(fm);
            // 建立XMLHttpRequest對象
            var xhr = new XMLHttpRequest();
            // console.log(xhr);
            // 調用open方法準備ajax請求
            xhr.open('post','upfile.php');

            var jdt = document.getElementById('jdt');
            // 綁定onprogress事件
            xhr.upload.onprogress = function(evt){
                // console.log(evt);
                // toFixed修正結果，只保留小數點後兩位
                // 計算上傳大小的百分比
                percent = (evt.loaded / evt.total).toFixed(2);
                // 設置進度條樣式
                jdt.style.width = percent * 300 + 'px';
                jdt.style.background = 'skyblue';
            }

            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    alert(xhr.responseText);
                }
            }
            // 發送ajax請求
            xhr.send(fd);
        }
    </script>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。