loading 进度
Posted 小橙子
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了loading 进度相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title>loading</title> <script> (function(win) { if(!window.imgCache){ window.imgCache={}; //window.setTimeout(function(){ console.log(window.imgCache) },10000); } function loader(assetParentDom){ this.debug=false; this.assetBox=document.querySelector(assetParentDom); this.imgList=document.querySelectorAll(assetParentDom+‘ img‘); this.cssList=document.querySelectorAll(assetParentDom+‘ link‘); this.jsList=document.querySelectorAll(assetParentDom+‘ script‘); this.loadRecord=[0,0,0]; this.loaded=0; this.length=this.imgList.length+this.cssList.length+this.jsList.length; this.onLoading=null; } loader.prototype.load=function(){ this.debug && console.log(‘loader资源总数：‘+this.length+‘\n img:‘+this.imgList.length+‘, css:‘+this.cssList.length+‘, js:‘+this.jsList.length); if(this.length==0){ return false;} if(this.cssList.length>0){ this.loadCss(); }else if(this.imgList.length>0){ this.loadImg(); }else if(this.jsList.length>0){ this.loadJs(); } } loader.prototype.loadImg=function(){ var _this=this, img, url, noCache; url=_this.imgList.item(this.loadRecord[0]).getAttribute(‘assetUrl‘); noCache=_this.imgList.item(this.loadRecord[0]).getAttribute(‘noCache‘); if(url){ img=new Image(); img.onload=function(e){ _this._calculate(0, e.target.src); window.imgCache[e.target.src.substring(e.target.src.lastIndexOf(‘/‘)+1, e.target.src.indexOf(‘?‘)>0?e.target.src.indexOf(‘?‘):999)]=e.target; } img.onerror=function(e){ _this._calculate(0, ‘错误---‘+e.target.outerHTML);} img.src= noCache?url+‘?r=‘+Math.random():url; }else{ _this._calculate(0, ‘错误---‘+_this.imgList.item(i).outerHTML); } } loader.prototype.loadCss=function(){ var _this=this; var url=_this.cssList.item(_this.loadRecord[1]).getAttribute(‘assetUrl‘); var noCache=_this.cssList.item(_this.loadRecord[1]).getAttribute(‘noCache‘); if(url && url.indexOf(‘.css‘)>0){ var mylink=document.createElement(‘link‘); mylink.type=‘text/css‘; mylink.rel=‘stylesheet‘; mylink.href=noCache?url+‘?r=‘+Math.random():url; document.head.appendChild(mylink); setTimeout(function(){ _this._calculate(1, mylink.href); },50) }else{ _this._calculate(1, ‘错误---‘+_this.cssList.item(_this.loadRecord[1]).outerHTML); } } loader.prototype.loadJs=function(){ var _this=this; var url=_this.jsList.item(_this.loadRecord[2]).getAttribute(‘assetUrl‘); var noCache=_this.jsList.item(_this.loadRecord[2]).getAttribute(‘noCache‘); if(url && url.indexOf(‘.js‘)>0){ var myjs=document.createElement(‘script‘); myjs.type=‘text/javascript‘; myjs.src=noCache?url+‘?r=‘+Math.random():url; myjs.onload=function(){ _this._calculate(2, myjs.src); } myjs.onerror=function(){ _this._calculate(2, ‘错误---‘+_this.jsList.item(_this.loadRecord[2]).outerHTML); } document.head.appendChild(myjs); }else{ _this._calculate(2, ‘错误---‘+_this.jsList.item(_this.loadRecord[2]).outerHTML); } } loader.prototype._calculate=function(type,url){ if(type===undefined){ return;} this.loadRecord[type]+=1; this.loaded+=1; this.debug && console.log(‘loader进度：[‘+this.loaded+‘/‘+this.length+‘], 载入：‘+url); var _percent=this.loaded/this.length; if(_percent>1)_percent=1; typeof(this.onLoading)==‘function‘ && this.onLoading(_percent); if(this.loadRecord[1]<this.cssList.length){ this.loadCss(); }else if(this.loadRecord[0]<this.imgList.length){ this.loadImg(); }else if(this.loadRecord[2]<this.jsList.length){ this.loadJs(); } } win.loader=loader; })(window); </script> <script type="text/javascript"> window.addEventListener(‘load‘, function(){ var myload = new loader(‘.asset‘); var loadTxt = document.querySelector(‘.asset ._load var‘); myload.onLoading=function(p){ loadTxt.innerText = Math.floor(p*100)+‘%‘; if(p<1){ return; } //setTimeout(function(){ appBegin(); }, 1000); }; setTimeout(function(){ myload.load(); }, 1000); }, false); </script> </head> <body> <!--资源loading--> <div class="asset"> <div class="_list"> <link assetUrl="css/main.css" /> <script assetUrl="js/jquery-2.1.1.min.js" ></script> <script assetUrl="js/jquery-transit.min.js" ></script> <script assetUrl="js/main.js"></script> <img assetUrl="img/loading.png" /> <img assetUrl="img/dh1.png" /> <img assetUrl="img/dh1b.jpg" /> <img assetUrl="img/dh1c.jpg" /> <img assetUrl="img/dh1d.png" /> <img assetUrl="img/dh2.jpg" /> <img assetUrl="img/dh3.jpg" /> <img assetUrl="img/dh3b.png" /> <img assetUrl="img/dh3c.png" /> <img assetUrl="img/dh4.png" /> <img assetUrl="img/dh4b.png" /> <img assetUrl="img/dh5.jpg" /> <img assetUrl="img/dh5b.png" /> <img assetUrl="img/dh6.jpg" /> <img assetUrl="img/dh7.png" /> <img assetUrl="img/dh7b.png" /> <img assetUrl="img/dh8.jpg" /> <img assetUrl="img/dh8b.png" /> <img assetUrl="img/ico.png" /> <img assetUrl="img/s2-1.gif" /> <img assetUrl="img/s2-2.gif" /> <img assetUrl="img/s2-3.png" /> <img assetUrl="img/s2-input.png" /> <img assetUrl="img/s2-packet.png" /> <img assetUrl="img/s3-head.jpg" /> <img assetUrl="img/s4-1.jpg" /> <img assetUrl="img/s4-2.png" /> <img assetUrl="img/s4-3.png" /> <img assetUrl="img/s4-4.png" /> <img assetUrl="img/user.jpg" /> <img assetUrl="img/user_prev.jpg" /> <img assetUrl="img/user1.jpg" /> <img assetUrl="img/user2.jpg" /> <img assetUrl="img/user3.jpg" /> <img assetUrl="img/hand.png" /> </div> <div class="_load"> <var>0%</var> </div> </div> </body> </html>
以上是关于loading 进度的主要内容，如果未能解决你的问题，请参考以下文章
自定义对话框片段内的进度条 - 如何从 AsyncTask 传递进度？
当片段视图加载是异步任务的一部分时，如何在片段加载之前显示进度条？
unity3d___UGui中如何创建loading...进度条