页面进度条

左手的ㄟ右手 2023-07-13 15:28 4阅读 0赞

## 使用定时器模拟 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8" />
    	<title>Document</title>
    	<style type="text/css">
    		.loading{ 
    			width: 100%;
    			height: 100%;
    			background-color: #fff;
    			position: fixed;
    			top: 0;
    			left: 0;
    			z-index: 100;	
    		}
    
    		.loading .pic{ 
    			width:815px;
    			height: 517px;
    			background: url("loading.png");
    			border: 1px soild red;
    			position: absolute;
    			top: 0;
    			left: 0;
    			bottom: 0;
    			right: 0;
    			margin: auto;
    		}
    
    	</style>
    	<script type="text/javascript" src="jquery.min.js"></script>
    	<script type="text/javascript">
    	$(function(){ 
    		//var loading = '<div class="loading"><img src="" alt="" class="pic" /></div>';
    		//$('body').append(loading);
    
    		setInterval(function(){ 
    			$(".loading").fadeOut();
    		},3000);
    	})
    	</script>
    </head>
    <body>
    	<div class="loading">
    		<img src="" alt="" class="pic" />
    	</div>
    	<img src="https://img.mukewang.com/5de0b94d0982077300000000.jpg">
    	<img src="https://img.mukewang.com/5de0b94d0982077300000000.jpg">
    	<img src="https://img.mukewang.com/5de0b94d0982077300000000.jpg">
    	<img src="https://img.mukewang.com/5de0b94d0982077300000000.jpg">
    </body>
    </html>

推荐一个网站，https://icons8.com/preloaders/ 在线生成动画图标。

## 根据页面加载 ##

知识点普及  
document.onreadystatechange  
document.readyState 值有如下4种  
uninitialized还未开始载入  
loading 载入中  
interactive 已加载，文档与用户可以开始交互  
complete 载入完成  
第一种方式使用定时器其实是假操作。

## CSS3进度条动画 ##

引入图片会造成加载慢，使用css3动画一般情况下会使页面加载更快些。

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8" />
    	<title>Document</title>
    	<style type="text/css">
    		@keyframes ldio-mkzxv2deru { 
    			0% {  transform: rotate(0) }
    			100% {  transform: rotate(360deg) }
    		}
    		.ldio-mkzxv2deru div {  box-sizing: border-box!important }
    		.ldio-mkzxv2deru > div { 
    			position: absolute;
    			width: 144px;
    			height: 144px;
    			top: 28px;
    			left: 28px;
    			border-radius: 50%;
    			border: 16px solid #000;
    			border-color: #e15b64 transparent #e15b64 transparent;
    			animation: ldio-mkzxv2deru 1s linear infinite;
    		}
    
    		.ldio-mkzxv2deru > div:nth-child(2), .ldio-mkzxv2deru > div:nth-child(4) { 
    			width: 108px;
    			height: 108px;
    			top: 46px;
    			left: 46px;
    			animation: ldio-mkzxv2deru 1s linear infinite reverse;
    		}
    		.ldio-mkzxv2deru > div:nth-child(2) { 
    			border-color: transparent #f8b26a transparent #f8b26a
    		}
    		.ldio-mkzxv2deru > div:nth-child(3) {  border-color: transparent }
    		.ldio-mkzxv2deru > div:nth-child(3) div { 
    			position: absolute;
    			width: 100%;
    			height: 100%;
    			transform: rotate(45deg);
    		}
    		.ldio-mkzxv2deru > div:nth-child(3) div:before, .ldio-mkzxv2deru > div:nth-child(3) div:after {  
    			content: "";
    			display: block;
    			position: absolute;
    			width: 16px;
    			height: 16px;
    			top: -16px;
    			left: 48px;
    			background: #e15b64;
    			border-radius: 50%;
    			box-shadow: 0 128px 0 0 #e15b64;
    		}
    		.ldio-mkzxv2deru > div:nth-child(3) div:after { 
    			left: -16px;
    			top: 48px;
    			box-shadow: 128px 0 0 0 #e15b64;
    		}
    
    		.ldio-mkzxv2deru > div:nth-child(4) {  border-color: transparent; }
    		.ldio-mkzxv2deru > div:nth-child(4) div { 
    			position: absolute;
    			width: 100%;
    			height: 100%;
    			transform: rotate(45deg);
    		}
    		.ldio-mkzxv2deru > div:nth-child(4) div:before, .ldio-mkzxv2deru > div:nth-child(4) div:after { 
    			content: "";
    			display: block;
    			position: absolute;
    			width: 16px;
    			height: 16px;
    			top: -16px;
    			left: 30px;
    			background: #f8b26a;
    			border-radius: 50%;
    			box-shadow: 0 92px 0 0 #f8b26a;
    		}
    		.ldio-mkzxv2deru > div:nth-child(4) div:after { 
    			left: -16px;
    			top: 30px;
    			box-shadow: 92px 0 0 0 #f8b26a;
    		}
    		/* .loadingio-spinner-double-ring-8spnkqbhqnp { width: 200px; height: 200px; display: inline-block; overflow: hidden; background: #bde3bc; } */
    		.loadingio-spinner-double-ring-8spnkqbhqnp { 
    			width: 100%;
    			height: 100%;
    			display: inline-block;
    			overflow: hidden;
    			background: #bde3bc;
    			position: fixed;
    			top: 0;
    			left: 0;
    			z-index: 100;	
    		}
    		/* .ldio-mkzxv2deru { width: 100%; height: 100%; position: relative; transform: translateZ(0) scale(1); backface-visibility: hidden; transform-origin: 0 0; see note above } */
    		.ldio-mkzxv2deru { 
    			width: 100%;
    			height: 100%;
    			position: relative;
    			transform: translateZ(0) scale(1);
    			backface-visibility: hidden;
    			transform-origin: 0 0; /* see note above */
    			/* position: absolute; */
    			top: 32%;
    			left: 42%;
    			bottom: 0;
    			right: 0;
    			margin: auto;
    		}
    		.ldio-mkzxv2deru div {  box-sizing: content-box; }
    		/* generated by https://loading.io/ */
    	</style>
    	<script type="text/javascript" src="jquery.min.js"></script>
    	<script type="text/javascript">
    		document.onreadystatechange=function(){ 
    			if(document.readyState=="complete"){ 
    				$(".loadingio-spinner-double-ring-8spnkqbhqnp").fadeOut();
    			}
    		}
    	</script>
    </head>
    <body>
    	<div class="loadingio-spinner-double-ring-8spnkqbhqnp">
    		<div class="ldio-mkzxv2deru">
    			<div></div>
    			<div></div>
    			<div>
    				<div></div>
    			</div>
    			<div>
    				<div></div>
    			</div>
    		</div>
    	</div>
    	<img src="https://img.mukewang.com/5de0b94d0982077300000000.jpg">
    	<img src="https://img.mukewang.com/5de0b94d0982077300000000.jpg">
    	<img src="https://img.mukewang.com/5de0b94d0982077300000000.jpg">
    	<img src="https://img.mukewang.com/5de0b94d0982077300000000.jpg">
    
    
    
    </body>
    </html>

进度条动画推荐网站http://www.loading.io  
CSS兼容写法的网站http://autoprefixer.github.io

## 自定义页面进度条 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8" />
    	<title>Document</title>
    	<style type="text/css">
    		@keyframes load { 
    			0% ,40%,100%{  transform: scaleY(0.4); }
    			20% {  transform: scaleY(1); }
    		}
    		
    		.loading{ 
    			width: 100%;
    			height: 100%;
    			background-color: #fff;
    			position: fixed;
    			top: 0;
    			left: 0;
    			z-index: 100;	
    		}
    
    		.loading .pic{ 
    			width:50px;
    			height: 50px;
    			position: absolute;
    			top: 0;
    			left: 0;
    			bottom: 0;
    			right: 0;
    			margin: auto;
    		}
    		.loading .pic i { 
    			display: block;
    			float: left;
    			width:6px;
    			height: 50px;
    			margin:0 2px;
    			background-color: #399;
    			transform: scaleY(0.4);
    			animation: load 1.2s infinite;
    		}
    
    		.loading .pic i:nth-child(2){ 
    			animation-delay: 0.1s;
    		}
    		.loading .pic i:nth-child(3){ 
    			animation-delay: 0.2s;
    		}
    		.loading .pic i:nth-child(4){ 
    			animation-delay: 0.3s;
    		}
    		.loading .pic i:nth-child(5){ 
    			animation-delay: 0.4s;
    		}
    	</style>
    	<script type="text/javascript" src="jquery.min.js"></script>
    	<script type="text/javascript">
    		document.onreadystatechange=function(){ 
    			if(document.readyState=="complete"){ 
    				$(".loading").fadeOut();
    			}
    		}
    	</script>
    </head>
    <body>
    	<div class="loading">
    		<div class="pic">
    			<i></i>
    			<i></i>
    			<i></i>
    			<i></i>
    			<i></i>
    		</div>
    	</div>
    	<img src="https://img.mukewang.com/5de0b94d0982077300000000.jpg">
    	<img src="https://img.mukewang.com/5de0b94d0982077300000000.jpg">
    	<img src="https://img.mukewang.com/5de0b94d0982077300000000.jpg">
    	<img src="https://img.mukewang.com/5de0b94d0982077300000000.jpg">
    
    
    
    </body>
    </html>

## 定位在头部的进度条 ##

这种方法利用浏览器从上而下加载资源，利用css3动画animate来改变进度条宽度，当到达100%的时候，利用回调函数隐藏进度条。

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8" />
    	<title>Document</title>
    	<style type="text/css">
    		.loading{ 
    			width: 100%;
    			height: 100%;
    			background-color: #fff;
    			position: fixed;
    			top: 0;
    			left: 0;
    			z-index: 100;	
    		}
    
    		.loading .pic{ 
    			width:0%;
    			height: 5px;
    			position: absolute;
    			top: 0;
    			left: 0;
    			background-color: #345;
    		}
    		
    
    	</style>
    	<script type="text/javascript" src="jquery.min.js"></script>
    	
    </head>
    <body>
    	<div class="loading">
    		<div class="pic">
    			<i></i>
    			<i></i>
    			<i></i>
    			<i></i>
    			<i></i>
    		</div>
    	</div>
    	<header>
    		<img src="https://img.mukewang.com/5de0b94d0982077300000000.jpg">
    	</header>
    	<script type="text/javascript">
    		$(".loading .pic").animate({ width:"10%"},100)
    	</script>
    	<section class="about">
    		<img src="https://img.mukewang.com/5de0b94d0982077300000000.jpg">
    	</section>
    	<script type="text/javascript">
    		$(".loading .pic").animate({ width:"40%"},100)
    	</script>
    	<section class="news">
    		<img src="https://img.mukewang.com/5de0b94d0982077300000000.jpg">
    	</section>
    	<script type="text/javascript">
    		$(".loading .pic").animate({ width:"80%"},100)
    	</script>
    	<footer>
    		<img src="https://img.mukewang.com/5de0b94d0982077300000000.jpg">		
    	</footer>
    	<script type="text/javascript">
    		$(".loading .pic").animate({ width:"100%"},100,function(){ 
    			$(".loading").fadeOut();
    		})
    	</script>
    	
    	
    	
    
    
    
    </body>
    </html>

## 获取实时数据的进度条 ##

知识点  
建立图像对象 new Image()  
属性 border complete height…  
事件 onload onerror onkeydown onkeypress…  
src属性一定要写到onload的后面，否则程序在IE中会出错。

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8" />
    	<title>Document</title>
    	<style type="text/css">
    		*{ 
    			margin: 0;padding:0;
    		}
    		.loading{ 
    			width: 100%;
    			height: 100%;
    			background-color: #fff;
    			position: fixed;
    			top: 0;
    			left: 0;
    		}
    
    		.loading .pic{ 
    			width: 100px;
    			height: 100px;
    			position: absolute;
    			top: 0;
    			left: 0;
    			right: 0;
    			bottom: 0;
    			margin:auto;
    			/* border:1px solid red; */
    			text-align: center;
    			font-size: 18px;
    			line-height: 100px;
    		}
    
    		.loading .pic span{ 
    			display: block;
    			width: 80px;
    			height: 80px;
    			border-radius: 50%;
    			/* background: #345; */
    			top: 10px;
    			left: 10px;
    			position: absolute;
    			box-shadow:0 3px 0 #012;
    			animation: rotate 1s infinite linear;
    		}
    
    		@keyframes rotate{ 
    			0%{ transform: rotate(0deg);}
    			100%{ transform: rotate(360deg);}
    		}
    
    
    	</style>
    	<script type="text/javascript" src="jquery.min.js"></script>
    	<script type="text/javascript">
    	$(function(){ 
    		var img = $("img");
    		var num = 0;
    		img.each(function(i){ 
    			var oImg = new Image();
    			oImg.onload = function(){ 
    				oImg.onload = null; // 避免重复加载
    				num++;
    				$(".loading .pic b").html(parseInt(num/$("img").size()*100)+"%");
    				if(num>=i){ 
    					$(".loading").fadeOut();
    				}
    			};
    			// src赋值一定要放在onload之后
    			oImg.src = img[i].src;
    		});
    	})
    	</script>
    </head>
    <body>
    	<div class="loading">
    		<div class="pic">
    			<span></span>
    			<b>0%</b>
    		</div>
    	</div>
    
    
    		<img src="https://img.mukewang.com/5de0b94d0982077300000000.jpg">
    		<img src="https://img2.mukewang.com/szimg/59eeb022000162bc05400300-360-202.jpg">
    		<img src="https://www.mycodes.net/js/wsisp.gif">
    		<img src="https://img.mukewang.com/5de0b94d0982077300000000.jpg">
    		<img src="https://f12.baidu.com/it/u=1530392225,760540738&fm=76">
    		<img src="https://t11.baidu.com/it/u=1790917018,1039287315&fm=76">
    		<img src="https://t10.baidu.com/it/u=281972922,2207100776&fm=76">
    
    	
    	
    	
    
    
    
    </body>
    </html>