展現(xiàn)效果:
1) 當(dāng)點(diǎn)擊Load的時(shí)候,模擬執(zhí)行異步加載. 瀏覽器被遮擋. 進(jìn)度條出現(xiàn).
實(shí)現(xiàn)思路:
1.當(dāng)用戶點(diǎn)擊load button執(zhí)行異步請(qǐng)求. 調(diào)用方法 出現(xiàn)加載條
2.怎么實(shí)現(xiàn)進(jìn)度條呢？
1) 在document.body 新增一個(gè)div.覆蓋瀏覽器. 設(shè)置背景會(huì)灰色. z-index = 999. 加載的時(shí)候讓用戶無法修改界面值
2) 在document.body 新增一個(gè)動(dòng)態(tài)的div.
代碼實(shí)現(xiàn):
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);}} 總結(jié):
1.可以將方法提出來. 對(duì)Ajax請(qǐng)求重新封裝一次. 實(shí)現(xiàn)調(diào)用Ajax請(qǐng)求的時(shí)候自動(dòng)條用進(jìn)度條方法.
2.如果是Angular的話. Angular提供了方法監(jiān)控http調(diào)用.監(jiān)控http執(zhí)行請(qǐng)求的時(shí)候調(diào)用進(jìn)度條方法就行了.無需在每次執(zhí)行 http調(diào)用.監(jiān)控http執(zhí)行請(qǐng)求的時(shí)候調(diào)用進(jìn)度條方法就行了.無需在每次執(zhí)行http的時(shí)候都去自己調(diào)用出現(xiàn)進(jìn)度條的方法.
以上內(nèi)容是小編給大家介紹的js異步加載進(jìn)度條的相關(guān)內(nèi)容，希望對(duì)大家有所幫助！
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
