通过设置html，body的height为100%来解决子元素设置height为100%不管用的情况。

因为高度为百分比是继承父元素的。

$.each(imgs,function(i,src)){

    var imgObj = new Image();

    $(imgObj).on('load error',function()){

        $progress.html(Math.round((count+1)/len *100)+'%');

            ...

    }

}

window.onload = function(){
preload();
showPic();
};
var imgs = [ 'img/banner.jpg',
        'img/pic01.jpg',
        'img/pic02.jpg',
        'img/pic03.jpg',
        'img/2017_5_14_Bing_.jpg',
        'img/2017_5_14_Bing_en-GB.jpg',
        'img/butterfly.jpg',
        'img/city.jpg',
        'img/desert.jpg',
        'img/flower.jpg',
        'img/flowers.jpg'
],
       index = 0,
   len = imgs.length,
   count = 0,
   progress = document.getElementsByClassName("progress")[0],
   loading = document.getElementsByClassName("loading")[0];

var imgObj = [];
function preload() {
for (var i=0; i < len; i++) {
imgObj[i] = new Image();
               imgObj[i].src = imgs[i];
imgObj[i].onload = function() {
progress.innerHTML = Math.round((count + 1) / len *100) + "%";
if (count >= len - 1) {
loading.style.display = "none";
document.title = "1/" + len;
}
count++;
}
imgObj[i].onerror = function() {
count++;
}
}
}

Math.max(a, b) //返回最大值
Math.min(a, b) // 返回最小值

一、Image对象有2个事件：load, error。

var imgObj = new Image(); // new实例化image对象。

$(imgObj).on('load error', function() {});

图片正常被加载之后，会触发load事件，如果没有被正常加载，会触发error事件。