JS -- 异步加载进度条

今天在博客园问答里面看到博友问道怎么实现Ajax异步加载产生进度条. 很好奇就自己写了一个.

展现效果:

1) 当点击Load的时候,模拟执行异步加载. 浏览器被遮挡. 进度条出现.

JS -- 异步加载进度条

实现思路:

1.当用户点击load button执行异步请求. 调用方法出现加载条

2.怎么实现进度条呢？

1) 在document.body 新增一个div.覆盖浏览器. 设置背景会灰色. z-index = 999. 加载的时候让用户无法修改界面值

2) 在document.body 新增一个动态的div.

代码实现:

Main.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="Loading.js" charset="utf-8"></script>
    <link rel="stylesheet" href="Loading.css" media="screen" title="no title" charset="utf-8">
  </head>
  <body>
      <button onclick="showLoading()">Load</button>
  </body>
</html>

　 Loading.js:

function showLoading()
{
  var overDiv = document.createElement("div");
  var loadingDiv = document.createElement("div");
  var childDiv1 = document.createElement("div");
  var childDiv2 = document.createElement("div");
  var childDiv3 = document.createElement("div");
  overDiv.classList.add('over');
  loadingDiv.classList.add('spinner');
  childDiv1.classList.add('bounce1')
  childDiv2.classList.add('bounce2')
  childDiv3.classList.add('bounce3')
  loadingDiv.appendChild(childDiv1);
  loadingDiv.appendChild(childDiv2);
  loadingDiv.appendChild(childDiv3);
  document.body.appendChild(overDiv);
  document.body.appendChild(loadingDiv)
  setTimeout(function()
  {
    document.body.removeChild(overDiv);
    document.body.removeChild(loadingDiv)
  }, 5000);
}

　　Loading.css

.spinner {
  width: 150px;
  text-align: center;
  left: 50%;
  top: 50%;
  position: absolute;
  z-index: 1000;
}

.over {
  width: 100%;
  height: 100%;
  z-index: 998;
  background-color: gray;
  position:absolute;
  top: 0px ;
  left : 0px;
  opacity: 0.2;
}

.spinner > div {
  width: 30px;
  height: 30px;
  background-color: #67CF22;
  border-radius: 100%;
  display: inline-block;
  -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
  animation: bouncedelay 1.4s infinite ease-in-out;
  /* Prevent first frame from flickering when animation starts */
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0.0) }
  40% { -webkit-transform: scale(1.0) }
}

@keyframes bouncedelay {
  0%, 80%, 100% {
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 40% {
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}

　　总结:

1.可以将方法提出来. 对Ajax请求重新封装一次. 实现调用Ajax请求的时候自动条用进度条方法.

2.如果是Angular的话. Angular提供了方法监控$http调用. 监控http执行请求的时候调用进度条方法就行了. 无需在每次执行$http的时候都去自己调用出现进度条的方法.

秒客网

JS -- 异步加载进度条

相关文章