php 异步进度条,浅析JS异步加载进度条_javascript技巧

展现效果:

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

实现思路:

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

2.怎么实现进度条呢？

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

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

代码实现:

Main.html:

Load

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调用.监控http执行请求的时候调用进度条方法就行了.无需在每次执行http的时候都去自己调用出现进度条的方法.

以上内容是小编给大家介绍的js异步加载进度条的相关内容，希望对大家有所帮助！

本文原创发布php中文网，转载请注明出处，感谢您的尊重！