進度條製作-GIF動畫
阿新 • • 發佈：2018-11-15
網頁進度條製作
一、為什麼需要網頁進度條
隨著HTML的普及，各種CSS3動畫及特效在網頁中層出不窮，PC端載入資料的速度還算可以，移動端相對要慢很多，如果圖片或指令碼沒有完全載入，使用者在操作中可能發生各種問題，因此我們需要對載入資料進行檢測，以更加人性化的方式給使用者展現。
二、常見進度條的樣式
- 百分比形式
- 旋轉動畫
- 固定在頂部的線條
三、進度條製作
載入進度條的製作，需要通過載入狀態事件，才是正確的結合實際情況的做法。
需要使用的方法：
- document.onreadystatechange 頁面載入狀態改變時的事件
- document.readystate 返回文件當前的狀態
狀態值：
- uninitialized 還未開始載入
- loading 載入中
- interactive 已載入，文件與使用者開始互動
- complete 載入完成
四、具體程式碼
CSS樣式檔案
/* 載入動畫樣式start */
.loading {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 100;
background: #ffffff; js檔案（重要）
<script src="https://code.jquery.com/jquery-3.1.1.min.js" type="text/javascript" 五、步驟總結
- 首先，我們在 htm l檔案中定義 loading 的結構；
- 而後，在 css 檔案中書寫對應的樣式檔案；
- 最後，在 js 檔案中，我們使用 onreadystatechange 在時機中，我們通過判斷 readyState 的值，決定隱藏 loading 結構的隱藏即可。
六、完整程式碼分享
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>進度條動畫製作</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
/* 載入動畫樣式start */
.loading {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 100;
background: #ffffff;
}
.loading .picture {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
background: url(img/loading.gif);
width: 150px;
height: 150px;
}
/* 載入動畫樣式end */
/* 頁面樣式start */
.container {
width: 1200px;
margin: 100px auto;
border: 1px solid red;
padding: 20px;
overflow: hidden;
border-radius: 10px;
}
.container .item {
float: left;
margin-bottom: 10px;
}
.container img {
font-size: 0;
vertical-align: middle;
width: 300px;
height: 200px;
}
/* 頁面樣式end */
</style>
</head>
<body>
<div class="loading">
<div class="picture"></div>
</div>
<!-- 注意：以下結構僅僅是為了演示頁面而已 -->
<div class="container">
<div class="item">
<img src="http://pic1.win4000.com/wallpaper/2018-01-06/5a50674a7b626.jpg">
</div>
<div class="item">
<img src="http://img2.imgtn.bdimg.com/it/u=2398464402,4254570216&fm=11&gp=0.jpg">
</div>
<div class="item">
<img src="http://i0.hdslb.com/bfs/article/669b74844e47c4ca9774aad43dc62b0d879fbcd6.jpg">
</div>
<div class="item">
<img src="http://pic1.win4000.com/wallpaper/2018-06-08/5b1a448a79175.jpg">
</div>
<div class="item">
<img src="http://img0.imgtn.bdimg.com/it/u=228361023,682353921&fm=26&gp=0.jpg">
</div>
<div class="item">
<img src="http://img5.imgtn.bdimg.com/it/u=550633143,1906543664&fm=11&gp=0.jpg">
</div>
<div class="item">
<img src="http://www.wallcoo.com/flower/digital_flower_jp_03/wallpapers/1680x1050/wallcoo.com_Digital_Flower_Photo_321.jpg">
</div>
<div class="item">
<img src="http://www.wallcoo.com/nature/2009_Landscape_1680_Desktop_04/wallpapers/1680x1050/Rising%20Mist%20at%20Dawn.jpg">
</div>
<div class="item">
<img src="http://www.wallcoo.com/photograph/Fresh%20Vegetables%20by%20Isabelle%20Rozenbaum/wallpapers/1440x900/Bunch%20of%20radishes%2C%20close-up.jpg">
</div>
<div class="item">
<img src="http://img2.niutuku.com/desk/1208/2044/ntk-2044-14905.jpg">
</div>
<div class="item">
<img src="http://www.wallcoo.com/cartoon/Semafore_Calendar_Project_1920/wallpapers/1280x800/Calendar_Design_2003.04.jpg">
</div>
<div class="item">
<img src="http://www.wallcoo.com/cartoon/future_tech_background/wallpapers/1680x1050/%5Bwallcoo_com%5D_3516_future_TECH_Image.jpg">
</div>
<div class="item">
<img src="http://i1.3conline.com/images/piclib/201305/20/batch/1/176010/13690210721960gaa56pug9.jpg">
</div>
<div class="item">
<img src="http://img2.niutuku.com/desk/1207/1030/ntk119230.jpg">
</div>
<div class="item">
<img src="http://img2.niutuku.com/desk/1207/1041/ntk120340.jpg">
</div>
<div class="item">
<img src="http://g.hiphotos.baidu.com/zhidao/pic/item/6a600c338744ebf814066acedbf9d72a6159a7cf.jpg">
</div>
<div class="item">
<img src="http://pic1.win4000.com/wallpaper/3/510b709821ec1.jpg">
</div>
<div class="item">
<img src="http://download.firefox.com.cn/gfox/wallpaper/2013/06/1920x1200.jpg">
</div>
<div class="item">
<img src="http://pic9.nipic.com/20100825/668573_135507057246_2.jpg">
</div>
<div class="item">
<img src="http://pic1.win4000.com/wallpaper/a/51f1e196b5576.jpg">
</div>
<div class="item">
<img src="http://img2.imgtn.bdimg.com/it/u=3757609547,3947405383&fm=214&gp=0.jpg">
</div>
<div class="item">
<img src="http://img4.imgtn.bdimg.com/it/u=2295877184,3273384647&fm=214&gp=0.jpg">
</div>
<div class="item">
<img src="http://i0.hdslb.com/bfs/article/9a3129c90c5da974176a74b4bbe782f1253fb8d2.jpg">
</div>
<div class="item">
<img src="http://i0.hdslb.com/bfs/article/[email protected]_934h.jpg">
</div>
<div class="item">
<img src="http://i0.hdslb.com/bfs/article/5350896be8e02fa2e673591380956fbf884a9e76.jpg">
</div>
<div class="item">
<img src="http://i0.hdslb.com/bfs/article/5278e12727d1ccd794a1c990905675e9b9992cce.jpg">
</div>
<div class="item">
<img src="http://img.club.pchome.net/upload/club/other/2006/6/4/nrq_1149351040.jpg">
</div>
<div class="item">
<img src="http://pic1.win4000.com/wallpaper/1/5791e7b252e81.jpg">
</div>
</div>
</body>
</html>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
document.onreadystatechange = function() {
console.log(document.readyState)
if (document.readyState == 'complete') {
console.log(document.readyState, '11111111111')
$('.loading').fadeOut();
}
}
</script>