浅析JS异步加载进度条

时间：2021-05-18

展现效果:

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

实现思路:

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;-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异步加载进度条的相关内容，希望对大家有所帮助！

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章