学习JavaScript图片预加载模块
前言
在一个应用中，通常会有很多图片，众所周知，加载图片需要时间，在图片没有加载出来之前，页面会是空白，为了提升用户体验，应用的开发人员使出浑身解数，其中最为常见的就是在图片没有加载完成之前，有一个加载动画。这里用到的技术主要是图片预加载。图片预加载的原理并不难，当给一个Image对象设置src属性后，图片就开始加载。给Image对象指定事件要位于设置src属性之前。
涉及到的内容
1.需要预加载的图片并不仅仅只是一张，通常将所有图片的信息保存在一个数组或者对象中，为了加载所有的图片，需要遍历出所有的图片。
2.当所有图片加载完后，又要接着执行其他的任务，这需要一个回调函数。
3.记录已经完成加载的图片数量，并实时的反应到页面上。
编码开始
注：html和css省略，主要讲解js文件
1.为了代码复用，我将图片预加载相关的代码封装在imageloader.js模块中，并暴露出一个接口。
2.入口文件是index.js，入口文件的代码如下：
varloadImage=require('./imageloader.js');
loadImage(['./img/rabbit-big.png','./img/face_slogan.png','./img/footer.png'],finish);
//finish是一个所以图片完成加载之后执行的回调函数
functionfinish(){
document.body.innerHTML='完成加载'
}
3.imageloader.js模块代码入下：
'usestrict';
/**
*预加载图片的函数
*@paramelem显示加载进度的元素
*@paramimages加载图片的数组或者对象
*@paramcallback全部图片加载完毕后调用的回调函数
*@paramtimeout加载超时的时长
*/
functionloadImage(elem,images,callback,timeout){
//遍历出图片的计数器
varcount=0;
//默认全部图片都能成功加载
varsuccess=true;
//超时timer的id
vartimerId=0;
//默认不会加载超时
varisTimeout=false;
//已经加载完成的长度
varloaded=0;
//对图片数组（或对象）进行遍历
for(varkeyinimages){
//过滤掉prototype上的属性
if(!images.hasOwnProperty(key)){
continue;
}
//获得每个图片元素
//期望每个图片元素是一个object：{src:XXX}
varitem=images[key];
if(typeofitem==="string"){
item=images[key]={
src:item
}
}
//如果格式不满足期望，则进行下一次遍历
if(!item||!item.src){
continue;
}
//计算+1
++count;
//设置图片元素的id
item.id='__img__'+key+getId();
//设置图片元素的image，它是一个image对象
item.image=window[item.id]=newImage();
doLoad(item);
}
//如果计数为0，则直接调用callback
if(!count){
callback(success);
}elseif(timeout){//如果设置了最长加载时间
timerId=setTimeout(onTimeout,timeout)
}
/**
*真正进行图片预加载的函数
*@paramitem图片元素的对象
*/
functiondoLoad(item){
item.state='loading';
varimg=item.image;
//图片加载成功的一个回调函数
img.onload=function(){
//只要有一张出现加载失败，success就会为false
success=success&true;
item.state='load';
loaded++;
done();
};
//图片加载失败的回调函数
img.onerror=function(){
success=false;
item.state='error';
loaded++;
done();
};
//加载图片
img.src=item.src;
/**
*每张图片加载完成的回调函数，不论成功还是失败
*/
functiondone(){
//清除绑定的事件
img.onload=null;
img.onerror=null;
try{
deletewindow[item.id]
}catch(e){
}
elem.innerHTML='已加载'+(loaded/count*100)+'%';
//当所有图片加载完成并且没有超时的情况，清除定时器，且执行回调函数
if(count===loaded&&!isTimeout){
clearTimeout(timerId);
callback(success);
}
}
}
/**
*超时函数
*/
functiononTimeout(){
isTimeout=true;
success=false;
callback(success);
}
}
var__id=0;
functiongetId(){
return++__id;
}
module.exports=loadImage;
4.我使用的是webpack进行打包，如果你对打包还不熟悉，可以点击这儿学习。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。