首页 > 代码库 > loading 进度
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= http://www.mamicode.com/noCache?url+‘?r=‘+Math.random():url;"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 进度
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。