寫一個網頁進度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);
}