浅析JS异步加载进度条.docxVIP

浅析JS异步加载进度条 这篇文章主要介绍了 JS异步加载进度条的相关资料, 需要的朋友可以参考下 展现效果： 1）当点击Load的时候，模拟执行异步加载.浏览器被遮 挡?进度条出现. 实现思路： 当用户点击loadbutton执行异步请求.调用方法出 现加载条 怎么实现进度条呢？ 1） 在document, body新增一个div.覆盖浏览器.设置背 景会灰色.z-index=999.加载的时候让用户无法修改界面值 2） 在docum ent. body新增一个动态的div. 代码实现： Main. html : It; !DOCTYP Ehtmlgt; It;htmlgt; It ;h eadgt; It;metacharset 二〃utf-8〃gt; leg gt; It; scr iptsrc=z/Loa ding. js〃cha rset二〃utf—8 〃gt; It; /scr iptgt; It; linkrel=z/st ylesheetzzhr ef二〃Loading .cssz/media= screen le=，，noti tie charset二〃u lt;/headgt; It;bodygt; It ;buttononcl ick二〃showLo ading（）/zgt; Loadlt ;/but tongt; It ;/b odygt; It ;/h tmlgt; Loadi ng. js: fun ctionshowLo adingO { v aroverDiv=d ocument. ere ateElement （〃div〃）; va rloadingDiv =document? c reateElemen t （〃div〃）； varchildDiv l=document. createEleme nt （〃div〃）; varchildDi v2=document ? createElem ent （〃div〃）； varchildD iv3=documen t. createEle ment （〃div〃）； overDiv. classList? a dd （ over）; loadingDi v. classList ? add（5 spinn er，）; chil dDivl. class List? add C b ounceT ） c hildDiv2? cl assList? add （ bounce2,） childDiv3 ? classList? add(? bounce 3) loadin gDiv. append Child(child Divl); loa dingDiv. app endChild(ch ildDiv2); loadingDiv. appendChild (childDiv3); document ? body. appen dChild(over Div); docu merit, body. a ppendChild (loadingDiv) setTimeou t (function () { documen t. body. remo veChild (ove rDiv); doc ument? body. removeChild (loadingDiv ) },5000); } L oading? css .spinner { wid th: 150px; te xt—align: ce nt er; left:5 0%; top:50%; position:ab solute; z~in dex: 1000; } ? over { width:100%; height : 100%; z-ind ex:998; ba ckground-co lor: gray; po sition:abso lute; top:Op x; left:Opx; opacity:0. 2 ; } ? spinnerg t; div { width :30px; heigh t :30px; ba ckground-co lor :#67CF22 ; border-rad ius: 100%; display:ini ine-block; -webkit—an imation:bou ncedelay1.4 sinfiniteea se-in-out; animation:bouncedelay 1. 4sinfinit eease-in-ou t; /*Preve ntfirstfram efromflicke ringwhenani mationstart s*/ -webki t—animation -fill-mode:both; anim atio