html5页面加载进度原理,web网页图片预加载，并显示加载进度

如果是图片多的H5，可以加一个loading动画，预加载需要用到的图片。

//图片加载方法

function load(imgSrc,callback) {

var imgs = [];

var c = 0;

for (var i = 0; i < imgSrc.length; i++) {

imgs[i] = new Image();

imgs[i].src = imgSrc[i];

imgs[i].onload = function(){

c++

if(callback){

callback(c,imgSrc);

}

}

}

return imgs;

}

//需要操作这里的方法

function imgStatus(n,imgSrc){

//加载进度百分比 (加载数量 / 图片数量 * 100)

var loadImgNum = parseInt(parseFloat(n / imgSrc.length).toFixed(2) * 100);

//做加载动画处理

console.log( loadImgNum );

//如果加载完成执行

if(n == imgSrc.length){

console.log('ok');

}

}

//图片列表(可以替换成网络图片，图片越多效果越明显)

var imgList = [

'5cc69f249ae6f.jpg',

'5cc69f2394f4d.jpg',

'5cc69f2284c11.jpg',

'5cc69f21ae754.jpg',

'5cc69f25a3474.jpg',

'5cc69f26b71ec.jpg',

'5cc69f27c78d2.jpg',

。。。

];

//调用

load(imgList,imgStatus);