进度条制作-GIF动画

一时失言乱红尘 2021-09-16 21:28 538阅读 0赞

## 网页进度条制作 ##

### 一、为什么需要网页进度条 ###

随着HTML的普及，各种CSS3动画及特效在网页中层出不穷，PC端载入数据的速度还算可以，移动端相对要慢很多，如果图片或脚本没有完全载入，用户在操作中可能发生各种问题，因此我们需要对载入数据进行检测，以更加人性化的方式给用户展现。

--------------------

### 二、常见进度条的样式 ###

*  百分比形式
 *  旋转动画
 *  固定在顶部的线条

--------------------

### 三、进度条制作 ###

加载进度条的制作，需要通过加载状态事件，才是正确的结合实际情况的做法。

#### 需要使用的方法： ####

*  document.onreadystatechange 页面加载状态改变时的事件
 *  document.readystate 返回文档当前的状态

#### 状态值： ####

1.  uninitialized 还未开始载入
2.  loading 载入中
3.  interactive 已加载，文档与用户开始交互
4.  complete 载入完成

--------------------

#### 四、具体代码 ####

##### CSS样式文件 #####

/* 加载动画样式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 */

##### js文件（重要） #####

--------------------

#### 五、步骤总结 ####

1.  首先，我们在 htm l文件中定义 loading 的结构；
2.  而后，在 css 文件中书写对应的样式文件；
3.  最后，在 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/d6d373a850c45beb250a7cbdcab1176551206740.jpg@1320w_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>