頁面緩存加載百分比效果

在手機端製做頁面的時候，若是圖片過多，會出現一個混存條，或者數字百分比的數字提示

（如圖）

那麼咱們應該怎麼製做這個一直loading的效果呢！

一些瀏覽器採用一些措施來緩解這一問題，好比試圖經過在本地緩存中存儲圖像，從而使隨後對圖像的調用可以當即被知足；

可是在圖像第一次被調用時依然會存在一些延遲。預載入是在須要圖像以前將其下載到緩存的一種方法。

預載入圖像最簡單的方法是在 JavaScript 中實例化一個新 Image() 對象，而後將須要載入的圖像的 URL 做爲參數傳入。

js部分結構：

//var images = new Array("images/milk.png","images/logo.png","images/bg.jpg","images/exam_bg1.jpg","images/exam_bg2.jpg","images/exam_bg3.jpg","images/title.png");
var i = 0;    
function loadImage() {
        var image = new Image();
        var len=$(".wrapBox").find("img").length;//建立一個Image對象：var image = new Image();
        image.src = $(".wrapBox").find("img").eq(i).attr("src");
        //image.src = images[index];//定義Image對象的src: image.src=」xxx.gif」;這樣作就至關於給瀏覽器緩存了一張圖片
        image.onload = function() {
            $(".loadText").animate({"width":parseInt(i / len * 100) + "%"},function(){
                if (i < len) {
                    setTimeout('loadImage()',100);
                } else {
                    setTimeout('showPage()',50);
                }
                });
        }
        i++;
}


function showPage() {
    $(".loading").hide();
    $(".wrapBox").show();
}

html部分

<div class="loading">
    <div class="loadBg">
          <img alt="" src="images/load_bar.jpg">
          <div class="loadText"></div>
     </div>
     <div class="loadhint"><img src="images/loading.png" /></div>
</div>   

css部分

.wrapBox{ display:none; max-width:640px;}
.loading{ position:absolute; top:350px; left:50%;z-index:99; width:415px; margin-left:-207px;}
.loadBg{ width:100%; margin-bottom:24px; position:relative;}
.loadText{ position:absolute; left:0; top:0; z-index:3; background:#80d2dd; height:100%;}
.loadhint{ text-align:center;}

這個效果只是我從項目中摘出來的部分，可能根據我的狀況使用不一樣，可是明白了

var image = new image();

image.onload = function(){}

這些應該不是很麻煩，最起碼原理就這些。