写一个网页进度loading（一）

图片预加载

主要是列出项目中要加载的主要图片，并写在预加载函数中。

var picPrefix = "images/";//图片所在的文件夹
var preloadPics = ["img1.png", "img2.png", "img3.png"];//需要加载的图片

$(function(){
    loadingImg(preloadPics, callback);//运行图片预加载函数
});

//图片预加载函数
function loadingImg(pic, callback){
    var len = pic.length;
    var index = 0;
    var img = new Image();
    var loading = function(){
        img.src = picPrefix + pic[index];
        img.onload = function(){
            var pro = Math.floor(((index+1)/len)*100)+'%';
            $(".procedure").text(pro);//显示加载进度
            $(".loadProColor").css({width:pro});//显示进度条
            index++;
            if(index < len){
            loading();
            }else{
                $(".procedure").text(100 + '%');
                callback();
            }
        }
    };
    loading();
}

//结束加载执行函数
function endLoading(){
    setTimeOut(function(){
        $(".loadPage").fadeOut();//隐藏加载页
        $(".indexPage").fadeIn();//显示正文页
    },500);
}