网页加载进度条

1、使用定时器来做网页加载定时器（先由一个加载的div覆盖住网页，过几秒钟消失），不切合实际

好用的加载图片，给大家推荐一个网站：https://icons8.com/preloaders/en/free

<style type="text/css">
    * { margin: 0; padding: 0; }
    .loading { position: fixed; width: 100%; height: 100%; background: #fff; z-index: 100; }    // 加载的图片盖住页面内容
    // left: 0; right: 0; top: 0; bottom: 0; margin: auto;可以居中
    .pic { position: absolute; background: url('./images/1.gif') no-repeat; width: 64px; height: 64px; background-size: 64px 64px; left: 0; right: 0; top: 0; bottom: 0; margin: auto;}</style>

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
	$(function () {
		setInterval(function () {
			$('.loading').fadeOut();        // 过三秒之后，加载的图片消失
		}, 3000);
	})		
</script>

<div class="loading"><div class="pic"></div></div>

2、通过加载事件制作进度条

document.onreadystatechange：页面加载状态改变时的事件

document.readyState：返回当前文档的状态包括：

（1）uninitialized：还未开始载入（2）loading：载入中

（3）interactive：已加载，文档与用户可以开始交互（4）complete：载入完成

<script type="text/javascript">
	document.onreadystatechange = function () {          // 当文档加载状态改变时
	    if (document.readyState == 'complete') {         // 当文档状态完成时
		$('.loading').fadeOut();
	    }
        }	
</script>

3、不使用图片，使用css动画

可以在线生成css动画的网站：https://loading.io/

在线补全css兼容的网站：http://autoprefixer.github.io/

4、定位在头部的加载条：根据文档是从上而下加载的

<style type="text/css">
	* { margin: 0; padding: 0; }
	.loading { position: fixed; width: 100%; height: 100%; background: #fff; z-index: 100; }
	.pic { position: absolute; width: 0; height: 5px; top: 0; background: red;}
</style>

<div class="loading"><div class="pic"></div></div>

<header></header>
<script type="text/javascript">
	$('.pic').animate({ width: "30%" }, 100)              // 当加载完头的时候，长度。。。
</script>
<section></section>
<script type="text/javascript">
	$('.pic').animate({ width: "60%" }, 100)             // 当加载完section时，长度。。。。
</script>
<section></section>
<script type="text/javascript">
	$('.pic').animate({ width: "90%" }, 100)
</script>
<footer></footer>
<script type="text/javascript">
	$('.pic').animate({ width: "100%" }, 100, function () {       // 当加载完底部时，长度100%，隐藏
		$('.loading').fadeOut();
	})
</script>

5、实时获取加载进度条：根据网页中的图片，当图片都加载完后

实现半圆转动：其实半圆是垂直阴影

<style type="text/css">
	* { margin: 0; padding: 0; }
	.loading { position: fixed; width: 100%; height: 100%; background: #fff; z-index: 100; }
	.pic { position: absolute;width: 100px; height: 100px; left: 0; right: 0; top: 0; bottom: 0; margin: auto; text-align:center; line-height: 100px; font-size:25px;}
	.pic span { position: absolute;top: 10px;left:10px;display: block;width: 80px;height: 80px;border-radius: 50%;box-shadow: 0 3px 0 #ccc; animation: round 1s infinite linear;}
	@keyframes round { 0% { transform: rotate(0); }  100% { transform: rotate(360deg); }}
</style>

<script type="text/javascript">
	$(function () {
		var img = $('img');                // 获取所有图片
		var num = 0;
		img.each(function (i) {
			var oImg = new Image();
			oImg.src = img[i].src;
			oImg.onload = function () {   // 当图片加载好后
				oImg.onload = null;   // 清除重复请求
				num++;
				$(".loading b").html(parseInt(num/($('img').length) * 100) + '%');  // 实时百分比
				if (num >= $('img').length) { 
					$(".loading").fadeOut();
				}
			}
		})
	});
</script>

<div class="loading">
	<div class="pic">
		<span></span>
		<b>0%</b>
	</div>	
</div>

效果：

猜你喜欢