<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.9.0.js"></script>
<style type="text/css">
body {
background:#000;
}
#loader {
margin: 0 auto;
width: 300px;
text-align: center;
font-size: 25px;
color: #efefef;
margin-top: 300px;
}
#bar {
border:1px solid #efefef;
padding: 1px;
margin-top: 10px;
}
#bar span {
display: block;
height: 2px;
background: #efefef;
}
.main{
text-align: center;
font-size: 25px;
}
</style>
</head>
<body style="overflow:auto">
<div id="loader">
Loading <span id="load-text">0%</span>
<div id="bar">
<span>
</span>
</div>
</div>
<div class="main" style="display: none;">
加载完显示的内容
</div>
</body>
</html>
<script type="text/javascript">
var allImgSrcArr = new Array();
addImgSrc("./img/skill/1_48.png");
addImgSrc("./img/skill/1_50.png");
addImgSrc("./img/skill/1_60.png");
addImgSrc("./img/skill/1_120.png");
addImgSrc("./img/skill/1_250.png");
addImgSrc("./img/skill/1_500.png");
addImgSrc("./img/skill/1_1000.png");
addImgSrc("./img/skill/1_2000.png");
//创建图片路径数组
function addImgSrc(src){
allImgSrcArr[allImgSrcArr.length] = src;
}
//=============================================================方法一
Array.prototype.remove = function(element) {//element为图片路径
for (var i = 0; i < this.length; i++)
if (this[i] == element) this.splice(i,1);//this为路径数组
};
function preload(images, progress) {
var total = images.length;
$(images).each(function(){
var src = this;
$('<img/>').attr('src', src).load(function() {
images.remove(src);
progress(total, total - images.length);
});
});
}
preload(allImgSrcArr, function(total, loaded){
if (Math.ceil(100 * loaded / total) >= 100) {
$('#load-text').html(100 + '%');
$('#bar span').css('width', 100 + '%');
$('#loader').fadeOut('slow', function() {
$("body").attr("style","background: #efefef;");
$('.main').fadeIn('slow');
});
} else {
var percent = Math.ceil(100 * loaded / total);
$('#load-text').html(percent + '%');
$('#bar span').css('width', percent + '%');
}
});
//=============================================================方法二
//对图片的加载不用JQuery，但图片数量大时容易内存溢出
/*
function LoadImageClass()
{
var loadImageClass = this;
this.Idx = 0; //已经被加载的图片个数
this.Num = 0; //图片总数
//下载图片
this.LoadImages = function()
{
this.Num = allImgSrcArr.length;
DownImg();
}
function DownImg()
{
var i=new Image();
var f = true;
i.onload= function()
{
if (f)
{
f = false
loadImageClass.Idx++;
if (loadImageClass.LoadIng) loadImageClass.LoadIng();
if (loadImageClass.Idx<loadImageClass.Num) DownImg();
else if(loadImageClass.CallBack) loadImageClass.CallBack(allImgSrcArr);
}
}
i.src = allImgSrcArr[loadImageClass.Idx];
}
}
var t=new LoadImageClass();
t.LoadIng = function() {
var percent = Math.ceil(100 * t.Idx/t.Num);
$('#load-text').html(percent + '%');
$('#bar span').css('width', percent + '%');
};
t.CallBack = function(arr)
{
$('#load-text').html(100 + '%');
$('#bar span').css('width', 100 + '%');
$('#loader').fadeOut('slow', function() {
$("body").attr("style","background: #efefef;");
$('.main').fadeIn('slow');
});
}
t.LoadImages();
*/
</script>
