页面加载

实现页面的加载

　　页面加载进度一直以来都是一个常见而又晦涩的需求，常见是因为它在某些“重”网页（特别是网页游戏）的应用特别重要；晦涩是因为web的特性，各种零散资源决定它很难是“真实”的进度，只能是一种“假”的进度，至少在逻辑代码加载完成之前，我们都不能统计到进度，而逻辑代码自身的进度也无法统计。另外，我们不可能监控到所有资源的加载情况。

　　所以页面的加载进度都是“假”的，它存在的目的是为了提高用户体验，使用户不至于在打开页面之后长时间面对一片空白，导致用户流失。

　　既然是“假”的，我们就要做到“仿真”才有用。仿真是有意义的，事实上用户并不在乎某一刻你是不是真的加载到了百分之几，他只关心你还要load多久。所以接下来我们就来实现一个页面加载进度loading。

　　完整的代码如下，你可以直接拷贝出来运行。

<!DOCTYPE html>
<html>
<head>
    <title>页面loading</title>
    <style type="text/css">
    	.loading {
		  display: table;
		  position: fixed;
		  top: 0;
		  left: 0;
		  width: 100%;
		  height: 100%;
		  background-color: #fff;
		  z-index: 5;
		}

		.loading .progress {
		  display: table-cell;
		  vertical-align: middle;
		  text-align: center;
		}
    </style>
</head>
<body>
  <div class="loading" id="loading">
    <div class="progress" id="progress">0%</div>
  </div>
  <script type="text/javascript">
  	var $loading = document.getElementById("loading");
  	var $progress = document.getElementById("progress");
  	var prg = 0;

  	var timer = 0;

  	progress([80,90],[1,3],100);

  	window.onload = function(){
  		progress(100,[1,5],10,function(){
  			window.setTimeout(function(){
  				$loading.style.display = "none";
  			},1000);
  		})
  	}

	function progress (dist, speed, delay, callback) {
		var _dist = random(dist);
		var _speed = random(speed);
		var _delay = random(delay);
	  	window.clearTimeout(timer);
	  	timer = window.setTimeout(function(){
	  		if(prg + _speed >= _dist){
	  			window.clearTimeout(timer);
	  			prg = _dist;
	  			callback && callback();
	  		}else{
	  			prg += _speed;
	  			progress(_dist,speed,delay,callback);
	  		}
	  		$progress.innerHTML = parseInt(prg) + "%";
	  		console.log(prg);
	  	},_delay);



	}
	function random (n){
		if(typeof n === 'object'){
			var times = n[1]-n[0];
			var offset = n[0];
			return Math.random()*times + offset;
		}else{
			return n;
		}
	}
  </script>
</body>
</html>

 

参考文章：http://www.cnblogs.com/likar/p/6247951.html　　

我的个人网站页面就是使用自己整理的这代码进行加载的。我的网站地址为：https://reng99.github.io/ 【为了更好的体验，请使用谷歌浏览器打开。首次打开加载有些慢，请耐心等待，后期想办法优化哈】

posted @ 2017-07-24 17:18  reng嘉  阅读(282)  评论(0)    收藏  举报