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...进度条

在recyclerview片段Reandroid中屏幕旋转后进度条不显示

css Bootstrap 3进度条片段