常见的几种网页进度条及如何判断页面已经加载完毕

女爷i 2021-09-16 09:00 294阅读 0赞

首先推荐一个自动生成gif图标的一个网址：preloaders.net  
![这里写图片描述][70]  
在里面挑选好加载的效果图以后，点击下载：  
![这里写图片描述][70 1]  
下载完成以后把gif图片保存到你项目的img文件夹中，方便使用。  
\*\*

## loading方法 ##

1.很low的方法——直接使用定时器

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>常见的网页进度条1</title>
    	<style>
    		.loading{
    			width: 100%;
    			height: 100%;
    			position: fixed;
    			top:0;
    			left: 0;
    			z-index: 100;
    			background-color: #fff;
    		}
    		.loading .pic{
    			width: 64px;
    			height: 64px;
    			background:url(images/loading.gif);
    			position: absolute;
    			top: 0;
    			left: 0;
    			bottom: 0;
    			right: 0;
    			margin: auto;
    		}
    	</style>
    	<script src="js/jquery-1.11.3.js"></script>
    	<script>
    		$(function () {
    			//可使用jquery动态添加遮罩及loading效果
    			// var loading = '<div class="loading"><div class="pic"></div></div>';
    			//$("body").append(loading);
    			//启动一个定时器
    			setInterval(function(){
    				$(".loading").fadeOut();//3秒之后影藏
    			},3000)
    		})
    	</script>
    </head>
    <body>
    	<div class="loading">
    		<div class="pic"></div>
    	</div>
    	<p>使用定时器的方法（不会判断页面加载，只是在定时器完成之后将也面显示出来）</p>
    	<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536779145193&di=88f99c68903b47c4e386755b73893335&imgtype=0&src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fwallpaper%2F1212%2F21%2Fc2%2F16781720_1356079420979.jpg" alt=""/>
    	<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536779184701&di=f3ab80235c5ddf5adb9d6b06ce47e82c&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2Fattachments2%2Fday_110730%2F110730052814920f360299a915.jpg" alt="">
    	<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536779211730&di=4c244c8bd60f74b1832625e27c063fc0&imgtype=0&src=http%3A%2F%2Fi3.download.fd.pchome.net%2Ft_960x600%2Fg1%2FM00%2F09%2F12%2FoYYBAFO6NYCIE0tSAAdYOvon7RoAABtkwF4hgIAB1hS650.jpg" alt="">
    	<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536779225935&di=4c13b2276bbe03877d4c5ea0cc56cc98&imgtype=0&src=http%3A%2F%2Fc15.eoemarket.net%2Fapp0%2F652%2F652549%2Fscreen%2F3260012.png" alt="">
    	<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536779271901&di=3ccda1af260cf969189de3f52ea31686&imgtype=0&src=http%3A%2F%2Fpic1.ytqmx.com%3A82%2F2015%2F0526%2F14%2F02.jpg%2521720.jpg" alt="">
    	<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536779311038&di=0599243d4fe87313ed37ee416cd73d6a&imgtype=0&src=http%3A%2F%2Fwww.desktx.cc%2Fd%2Ffile%2Fwallpaper%2Fscenery%2F20170105%2F2647448be73294d17c28d91407661f8c.jpg" alt="">
    	<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536779320074&di=ec9d10c18c21daec3b89b5573c22ef0f&imgtype=0&src=http%3A%2F%2Fpicture.ik123.com%2Fuploads%2Fallimg%2F170320%2F3-1F320150H5.jpg" alt="">
    	<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536779349967&di=11eaaee20a3da68abf58938bdad012e0&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2017-11-29%2F5a1e13119deee.jpg" alt="">
    </body>
    </html>

\*\*  
这种方法是直接给一个时间，等结束以后，加载效果消失。但是这种方法并不能判断页面是否已经加载完毕，虽然简单粗暴，但显然这并不是我们想要的结果；

2.根据页面是否加载完毕来关闭loading效果：  
首先，咱们要想知道页面是否加载完毕，需要知道以下几点：  
1.document.onreadystatechange 页面加载状态改变时的事件  
2.document.readyState 页面当前文档的状态  
1）.uninitialized 还未开始载入  
2）.loading 载入中  
3）.interactive 已加载，文档和永和可以开始交互  
4）.complete 载入完成  
这里我们就不使用定时器的那种方法了，我们直接来判断页面是否加载完毕去决定loading效果的关闭与否，那么直接将第一个方法的js改为：

document.onreadystatechange = function () {//即在加载的过程中执行下面的代码
    	if(document.readyState=="complete"){//complete加载完成
    		$(".loading").fadeOut();
    	}
    }

这种方法是咱们用到的最多的方法了，因为它能判断出来页面是否真的已经加载完毕。

3.用C3做进度条的效果  
这个就要用transform属性以及animation动画了，上面两个方法里，都是用的gif图，那么这样一个加载的效果我们用C3怎么去实现呢？  
![这里写图片描述][70 2]  
说下大概思路吧，首先你肯定得写一个容器把进度条装进去：

然后再修改样式：

.loading{width: 100%;height: 100%;position: fixed;top:0;left: 0;z-index: 100;background-color: #fff;}
    .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;background-color: #399;margin: 0 2px;transform: scaleY(.4);animation: load 1.2s infinite;
    }
    .loading .pic i:nth-child(1){}
    .loading .pic i:nth-child(2){animation-delay: .1s; }
    .loading .pic i:nth-child(3){animation-delay: .2s;}
    .loading .pic i:nth-child(4){animation-delay: .3s;}
    .loading .pic i:nth-child(5){animation-delay: .4s;}
    @keyframes load{
    	0%,40%,100%{transform: scaleY(.4);}
    	20%{transform: scaleY(1);}
    }

写好这些以后，动画就已经产生了。  
再下来将第二种方法的js粘贴过来，就达到了用CSS3来实现页面加载的一个动画效果了。

4.还有一种加载方式时，实时获取加载数据，就是百分数的那种效果，比如这样：  
![这里写图片描述][70 3]  
这种效果在页面中也比较常见，也是用css3做的，代码如下：  
首先，先给一个容器用来装进度条：

然后写对应的样式及动画：

*{
    		margin:0;
    		padding: 0;
    	}
    	.loading{width: 100%;height: 100%;position: fixed;top:0;left: 0;z-index: 100;background-color: #fff;}
    	.loading .pic{width: 100px;height: 100px;position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin: auto;font-size: 30px;text-align: center;line-height: 100px;}
    	.loading .pic span{display: block;width: 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;
    	}
    	@-webkit-keyframes rotate{
    		0%{-webkit-transform: rotate(0deg);}
    		100%{-webkit-transform: rotate(360deg);}
    	}
    	@keyframes rotate{
    		100%{transform: rotate(360deg);}
    	}；

那么现在打开浏览器以后呈现在眼前的是一个单调的转圈的动画，所以接下来我们还得写js：

$(function () {
    	var img = $("img");//首先获取所有的Img对象
    	var num = 0;//定义一个变量，赋值给b标签用
    	img.each(function(i){//遍历获取到的所有img
    		var oImg = new Image();//new一个新对象
    		oImg.onload = function(){//使用onload方法，在加载完成后执行
    			oImg.onload = null;//首先清除掉缓存
    			num++;//每次加载的过程中num++，即执行次数
    			$(".loading b").html(parseInt(num/$("img").size()*100)+"%");//改变b标签的内容，用num除以img的个数，再乘以100，再取整，这就是加载的百分数
    				if(num >= i){
    					$(".loading").fadeOut();//当num的值大于等于个数时隐藏
    				}
    			}
    			oImg.src = img[i].src;//预加载，先指定一个img.src，当onload成功以后可以将数据指定到某一个元素或者图片上，或者返回一个结果
    		})
    	})

OK，完成（一定记得要引jQuery，当然用原生就不用引了）。

公众号：Coder 杂谈，欢迎关注  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMzQ1MjM3_size_16_color_FFFFFF_t_70]

[70]: /images/20210813/a97e480f519b475e8943b2961afc0810.png
[70 1]: /images/20210813/0f40c5dced054a86a366b42c6697882c.png
[70 2]: /images/20210813/d325257f12d147769aed892814ffce3a.png
[70 3]: /images/20210813/794ff49c7dfe4272b8e4945b8e2515b1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMzQ1MjM3_size_16_color_FFFFFF_t_70]: /images/20210813/03104274522246bfb9c53c9ee047260b.png