淺析JS異步加載進(jìn)度條
展現(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í)候讓用戶無(wú)法修改界面值
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.可以將方法提出來(lái). 對(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)度條方法就行了.無(wú)需在每次執(zhí)行 http調(diào)用.監(jiān)控http執(zhí)行請(qǐng)求的時(shí)候調(diào)用進(jìn)度條方法就行了.無(wú)需在每次執(zhí)行http的時(shí)候都去自己調(diào)用出現(xiàn)進(jìn)度條的方法.
以上內(nèi)容是小編給大家介紹的js異步加載進(jìn)度條的相關(guān)內(nèi)容,希望對(duì)大家有所幫助!
- JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)加載進(jìn)度條代碼超簡(jiǎn)單
- 簡(jiǎn)單實(shí)現(xiàn)js進(jìn)度條加載效果
- pace.js頁(yè)面加載進(jìn)度條插件
- javascript 實(shí)現(xiàn)頁(yè)面加載進(jìn)度條代碼
- js ajax加載時(shí)的進(jìn)度條代碼
- js+HTML5 canvas 實(shí)現(xiàn)簡(jiǎn)單的加載條(進(jìn)度條)功能示例
- jquery插件NProgress.js制作網(wǎng)頁(yè)加載進(jìn)度條
- JS實(shí)現(xiàn)進(jìn)度條動(dòng)態(tài)加載特效
- 環(huán)形加載進(jìn)度條封裝(Vue插件版和原生js版)
- JavaScript canvas繪制圓形加載進(jìn)度條
相關(guān)文章
jQuery實(shí)現(xiàn)動(dòng)態(tài)文字搜索功能
本文主要介紹了jQuery實(shí)現(xiàn)動(dòng)態(tài)文字搜索功能的分析過(guò)程,文章底部提供了完整的代碼。具有一定的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-01-01layUI實(shí)現(xiàn)三級(jí)導(dǎo)航菜單效果
這篇文章主要為大家詳細(xì)介紹了layUI實(shí)現(xiàn)三級(jí)導(dǎo)航菜單效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-07-07javascript權(quán)威指南 學(xué)習(xí)筆記之變量作用域分享
最近一直在看《javascript權(quán)威指南 第五版》,變量作用域這一章,看得真的有點(diǎn)累。不過(guò),收獲還是多多。2011-09-09javascript實(shí)現(xiàn)標(biāo)簽切換代碼示例
本文給大家分享的事tab切換的兩段js,均可實(shí)現(xiàn)標(biāo)簽切換功能,大家根據(jù)自己的需求自由選擇2016-05-05javascript中創(chuàng)建對(duì)象的三種常用方法
在javascript中創(chuàng)建對(duì)象的三種方法,腳本之家以前發(fā)布過(guò)有簡(jiǎn)單實(shí)例版的,大家可以參考下。2010-12-12Bootstrap進(jìn)度條學(xué)習(xí)使用
這篇文章主要為大家詳細(xì)介紹了Bootstrap進(jìn)度條的學(xué)習(xí)使用,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02提高JavaScript執(zhí)行效率的23個(gè)實(shí)用技巧
JavaScript是一門(mén)非常流行的編程語(yǔ)言,許多開(kāi)發(fā)者都會(huì)把JavaScript選為入門(mén)語(yǔ)言,本文向大家分享JavaScript提高執(zhí)行效率的小技巧、最佳實(shí)踐等非常實(shí)用的內(nèi)容2017-03-03