<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<style>
.loading{
width: 100%;height: 100%;background: #fff;position: fixed;top: 0;left: 0;z-index: 100;
}
.loading .pic{
width: 100px;height: 100px;position: absolute;left: 0;top: 0;bottom: 0;right: 0;margin: auto;
text-align: center;line-height: 100px;font-size: 25px;
}
.loading .pic span{width: 80px;height: 80px;position: absolute;top: 10px;left: 10px;border-radius: 50%;
-webkit-box-shadow: 0 3px 0 #333;
box-shadow: 0 3px 0 #333;-webkit-animation: rotate 0.6s infinite;animation: rotate 0.6s infinite;display: block;
}
@-webkit-keyframes rotate{
from{-webkit-transform: rotate(0deg);transform: rotate(0deg);}
to{-webkit-transform: rotate(360deg);transform: rotate(360deg);}
}
@keyframes rotate{
from{-webkit-transform: rotate(0deg);transform: rotate(0deg);}
to{-webkit-transform: rotate(360deg);transform: rotate(360deg);}
}
</style>
</head>
<body>
<div class="loading">
<div class="pic">
<span></span>
<b>0%</b>
</div>
</div>
<header>
<img src="http://img.tuku.cn/file_big/201503/d8905515d1c046aeba51025f0ea842f0.jpg" />
<img src="http://tupian.enterdesk.com/2013/mxy/12/11/4/3.jpg" />
</header>
<section class="banner">
<img src="http://tupian.enterdesk.com/2013/mxy/12/28/1/3.jpg" />
</section>
<section class="nav">
<img src="http://pic9.nipic.com/20100818/5462876_150854046500_2.jpg" />
<img src="http://pic10.nipic.com/20100929/4308872_150108084472_2.jpg" />
<img src="http://pic13.nipic.com/20110422/4629619_135327675102_2.jpg" />
<img src="http://t-1.tuzhan.com/03a005a9a4b8/c-2/l/2013/05/07/16/47c17c9b8f7d420e9a534cf06917182f.png" />
<img src="http://pic9.nipic.com/20100818/5462876_150854046500_2.jpg" />
<img src="http://pic27.nipic.com/20130314/10415779_101118376000_2.jpg" />
<img src="http://pic71.nipic.com/file/20150625/11114139_075051727000_2.jpg" />
<img src="http://pic41.nipic.com/20140601/11630322_221246144000_2.jpg" />
<img src="http://pic10.nipic.com/20100928/5116356_084653069385_2.jpg" />
<img src="http://www.dabaoku.com/sucaidatu/ziran/ziranfengjing/20026200.JPG" />
<img src="http://pic.58pic.com/58pic/14/84/96/62u58PICymD_1024.jpg" />
<img src="http://pic10.nipic.com/20100929/4308872_150108084472_2.jpg" />
<img src="http://pic74.nipic.com/file/20150810/13417830_143535932774_2.jpg" />
<img src="http://pic43.nipic.com/20140704/2531170_201939199000_2.jpg" />
</section>
<section class="abourt">
<img src="http://pic.58pic.com/58pic/13/87/72/73t58PICjpT_1024.jpg" />
<img src="http://tupian.enterdesk.com/2014/mxy/02/11/4/4.jpg" />
</section>
<section class="pro">
<img src="http://img1.imgtn.bdimg.com/it/u=2418226610,2868081468&fm=214&gp=0.jpg" />
</section>
<script src="js/jquery-1.11.0.js"></script>
<script type="text/javascript">
var img = $("img");
var num = 0
img.each(function(i){
var oimg = new Image();
oimg.onload = function(){
console.log(i)
oimg.onload = null;
num++;
$(".loading .pic b").html(parseInt(num/$("img").size()*100)+'%');
if(num>=i){
$(".loading").fadeOut();
}
}
oimg.src = img[i].src;
})
</script>
</body>
</html>
遇到一个坑，使用jq 3.0的版本在onload里面拿不到外码的i ,使用1.0就可以
扫一扫
3196
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
