常用的网页加载进度条_网页首页加载条100%-优快云博客

本文链接：https://blog.youkuaiyun.com/daimomo000/article/details/76776134

看慕课网的视频，将内容记录下来，便于以后查询。

网页加载进度条的误区：一般进度条都是用定时器制作的，而非根据网页主体内容进行实现，这种定时器形式只能说在表现上实现了加载效果。

比如demo1.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>进度条</title>
  <script src="https://cdn.bootcss.com/jquery/2.2.1/jquery.js"></script>
  <style>
  .loading{
    width: 100%;
    height: 100%;
    position: fixed;
    top:0;
    left:0;
    z-index: 100;
    background: #fff;
  }
  .loading .pic{
    width: 64px;
    height: 64px;
    background:url(img/loading.gif);
    position: absolute;
    top:0;
    bottom:0;
    left: 0;
    right: 0;
    margin:auto;
  }
  </style>
  <script>
  $(function(){
    var loading='<div class="loading"><div class="pic"></div></div>';
    $("body").append(loading);
    setInterval(function(){
      $(".loading").fadeOut();
    },3000);
  })
  </script>
</head>
<body>

<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1501999832842&di=0190ba35a2d5145599a01b8f038c5ea2&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dshijue1%252C0%252C0%252C294%252C40%2Fsign%3D6c3f6159e1f81a4c323fe48abf430a2c%2F500fd9f9d72a6059452132372234349b033bbaee.jpg" alt="">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1501999832841&di=f2d58906215d2f39b734ced294f4d1d4&imgtype=0&src=http%3A%2F%2Fimg4.duitang.com%2Fuploads%2Fitem%2F201408%2F30%2F20140830185456_Eijik.jpeg" alt="">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1501999832840&di=42c43bbbf35dc54e9fabec17e92fd890&imgtype=0&src=http%3A%2F%2Fimg17.3lian.com%2Fd%2Ffile%2F201702%2F22%2F1005a2e0825ffe290b3f697404ee8038.jpg" alt="">
</body>
</html>

其中gif图是从网站：https://preloaders.net/ 下载的。

通过加载状态事件制作进度条

demo2.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>进度条</title>
  <script src="https://cdn.bootcss.com/jquery/2.2.1/jquery.js"></script>
  <style>
  .loading{
    width: 100%;
    height: 100%;
    position: fixed;
    top:0;
    left:0;
    z-index: 100;
    background: #fff;
  }
  .loading .pic{
    width: 64px;
    height: 64px;
    background:url(img/loading.gif);
    position: absolute;
    top:0;
    bottom:0;
    left: 0;
    right: 0;
    margin:auto;
  }
  </style>
  <script>
  /*
  通过加载状态事件制作进度条
  document.onreadystatechange 页面加载状态改变时的事件
  document.readyState 返回当前文档的状态
  1.uninitialized -还未开始载入
  2.loading -载入中
  3.Interactive -已加载，文档与用户可以开始交互
  4.complete -载入完成
  */
  document.onreadystatechange=function(){
    if(document.readyState=="complete"){
      $("loading").fadeOut();
    }
  }
  </script>
</head>
<body>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1502016414080&di=9236d306380e2994d5c860d1325077ff&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F574e9258d109b3deb13fbe4cc6bf6c81800a4c15.jpg" alt="">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1502016414080&di=4cb85c2aad7a50002762eb5f7c1b7929&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2Fb03533fa828ba61e5e6d4c0d4b34970a304e5915.jpg" alt="">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1501999832842&di=0190ba35a2d5145599a01b8f038c5ea2&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dshijue1%252C0%252C0%252C294%252C40%2Fsign%3D6c3f6159e1f81a4c323fe48abf430a2c%2F500fd9f9d72a6059452132372234349b033bbaee.jpg" alt="">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1501999832841&di=f2d58906215d2f39b734ced294f4d1d4&imgtype=0&src=http%3A%2F%2Fimg4.duitang.com%2Fuploads%2Fitem%2F201408%2F30%2F20140830185456_Eijik.jpeg" alt="">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1501999832840&di=42c43bbbf35dc54e9fabec17e92fd890&imgtype=0&src=http%3A%2F%2Fimg17.3lian.com%2Fd%2Ffile%2F201702%2F22%2F1005a2e0825ffe290b3f697404ee8038.jpg" alt="">
</body>
</html>

demo3.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>定位在顶部的进度条</title>
	<style>
	.loading{
	    width: 100%;
	    height: 100%;
	    position: fixed;
	    top:0;
	    left:0;
	    z-index: 100;
	    background: #fff;
	  }
	  .loading .pic{
	    width: 0%;
	    height: 5px;
	    position: absolute;
	    top:0;
	    left: 0;
	    background: #f33;
	  }
	</style>
	<script src="https://cdn.bootcss.com/jquery/2.2.1/jquery.js"></script>

</head>
<body>
	<div class="loading">
		<div class="pic"></div>
	</div>
	<header>
		<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1502016414080&di=9236d306380e2994d5c860d1325077ff&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F574e9258d109b3deb13fbe4cc6bf6c81800a4c15.jpg" alt="">
		<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1502016414080&di=4cb85c2aad7a50002762eb5f7c1b7929&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2Fb03533fa828ba61e5e6d4c0d4b34970a304e5915.jpg" alt="">
	</header>
	<script>
		$(".loading .pic").animate({width:"10%"},100);
	</script>
	<section class="banner">
		<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1501999832842&di=0190ba35a2d5145599a01b8f038c5ea2&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dshijue1%252C0%252C0%252C294%252C40%2Fsign%3D6c3f6159e1f81a4c323fe48abf430a2c%2F500fd9f9d72a6059452132372234349b033bbaee.jpg" alt="">
		<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1501999832841&di=f2d58906215d2f39b734ced294f4d1d4&imgtype=0&src=http%3A%2F%2Fimg4.duitang.com%2Fuploads%2Fitem%2F201408%2F30%2F20140830185456_Eijik.jpeg" alt="">
	</section>
	<script>
		$(".loading .pic").animate({width:"30%"},100);
	</script>
	<section class="about">
		<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1501999832842&di=0190ba35a2d5145599a01b8f038c5ea2&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dshijue1%252C0%252C0%252C294%252C40%2Fsign%3D6c3f6159e1f81a4c323fe48abf430a2c%2F500fd9f9d72a6059452132372234349b033bbaee.jpg" alt="">
		<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1501999832841&di=f2d58906215d2f39b734ced294f4d1d4&imgtype=0&src=http%3A%2F%2Fimg4.duitang.com%2Fuploads%2Fitem%2F201408%2F30%2F20140830185456_Eijik.jpeg" alt="">
	</section>
	<script>
		$(".loading .pic").animate({width:"50%"},100);
	</script>
	<section class="pro"></section>
	<script>
		$(".loading .pic").animate({width:"80%"},100);
	</script>
	<section class="news"></section>
	<script>
		$(".loading .pic").animate({width:"95%"},100);
	</script>
	<footer></footer>
	<script>
		$(".loading .pic").animate({width:"100%"},100,function(){
			$(".loading").fadeOut();
		});
	</script>
</body>
</html>

demo4.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>实时获取加载数据的进度条</title>
  <style>
  .loading{
    width: 100%;
    height: 100%;
    position: fixed;
    top:0;
    left:0;
    z-index: 100;
    background: #fff;
  }
  .loading .pic{
    width: 100px;
    height: 100px;
    position: absolute;
    top:0;
    bottom:0;
    left: 0;
    right: 0;
    margin:auto;
    font-size: 28px;
    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;
    -webkit-animation:rotate 1s infinite linear;
    animation:rotate 1s infinite linear;
  }
  @-webkit-keyframes rotate{
    0%{-webkit-transform:rotate(0deg);}
    100%{transform:rotate(360deg);}
  }
  @keyframes rotate{
    0%{transform:rotate(0deg);}
    100%{transform:rotate(360deg);}
  }
  </style>
  <script src="https://cdn.bootcss.com/jquery/2.2.1/jquery.js"></script>
  <script>
  $(function(){
    var img=$("img");
    var num=0;
    img.each(function(i){
      oImg.οnlοad=null;//消除对于gif图的一直请求
      var oImg=new Image();
      oImg.οnlοad=function(){
        num++;
        $(".loading .pic b").html(parseInt(num/$("img").size()*100)+"%");
        if(num>=i){
          $(".loading").fadeOut();
        }
      }
      oImg.src=img[i].src;
    });
  });
  </script>
</head>
<body>
<div class="loading">
  <div class="pic">
    <span></span> 
    <b>0%</b>
  </div>
</div>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1502016414080&di=9236d306380e2994d5c860d1325077ff&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F574e9258d109b3deb13fbe4cc6bf6c81800a4c15.jpg" alt="">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1502016414080&di=4cb85c2aad7a50002762eb5f7c1b7929&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2Fb03533fa828ba61e5e6d4c0d4b34970a304e5915.jpg" alt="">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1501999832842&di=0190ba35a2d5145599a01b8f038c5ea2&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dshijue1%252C0%252C0%252C294%252C40%2Fsign%3D6c3f6159e1f81a4c323fe48abf430a2c%2F500fd9f9d72a6059452132372234349b033bbaee.jpg" alt="">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1501999832841&di=f2d58906215d2f39b734ced294f4d1d4&imgtype=0&src=http%3A%2F%2Fimg4.duitang.com%2Fuploads%2Fitem%2F201408%2F30%2F20140830185456_Eijik.jpeg" alt="">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1501999832840&di=42c43bbbf35dc54e9fabec17e92fd890&imgtype=0&src=http%3A%2F%2Fimg17.3lian.com%2Fd%2Ffile%2F201702%2F22%2F1005a2e0825ffe290b3f697404ee8038.jpg" alt="">
</body>
</html>