页面缓存加载百分比效果

在手机端制作页面的时候，如果图片过多，会出现一个混存条，或者数字百分比的数字提示

（如图）

那么我们应该怎么制作这个一直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(){}

这些应该不是很麻烦，最起码原理就这些。