body {
margin:0;
padding:0;
}
#loadingbg {
background-color : #222222;
height : 100%;
width : 100%;
position : fixed;
z-index: 3;
}
#loadingwrap {
height : 20px;
width : 200px;
box-shadow : 0px 0px 10px #111111 inset;
margin: 0 auto;
margin-top: 50vh;
}
#loading {
height : 20px;
width : 0;
text-align: center;
background-color : #C9F76F;
box-shadow : 0px 0px 5px #222 inset;
}
.wrap{
width : 100%;
margin: 0 auto;
}
.bg-img{
width: 100%;
max-width:75vh;
}
var loadNum = 0;
var imgNum = $(‘.bg-img’).length;
var txtGrad = parseInt(100 / imgNum);
var bgGrad = parseInt(200 / imgNum);
$(‘.bg-img’).each(function () {
//加入complete为了判断图片是否在未绑定load事件就已经加载完成
if ($(this)[0].complete) {
loadNum += 1;
$(“#loading”).text(loadNum * txtGrad + “%”).width(loadNum * bgGrad + “px”)
if (loadNum >= imgNum) {
$(“#loading”).text(“100%”).width(“200px”);
$(“#loadingbg”).animate({ opacity: “0” }, function () {
$(this).hide()
})
}
} else {
$(this).load(function () {
loadNum += 1;
$(“#loading”).text(loadNum * txtGrad + “%”).width(loadNum * bgGrad + “px”)
if (loadNum >= imgNum) {
$(“#loading”).text(“100%”).width(“200px”);
$(“#loadingbg”).animate({ opacity: “0” }, function () {
$(this).hide()
})
}
})
}
})