JS图片预加载 

<!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>

 

posted @ 2013-01-27 10:24  风吹屁股凉冰冰  阅读(5071)  评论(0)    收藏  举报