如果是图片多的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);
网友评论