第一种方法，异步回调，执行完这个函数，在回调<!DOCTYPE html<html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//创建数组 用于保存图片的对象
var arr=[];
var num=1;
//创建图片对象
var img=new Image();
//把第一张图片加载到缓存中
img.src="./image/icon/"+num+".gif";
//添加这个图片
arr.push(img);
//给对象img 添加加载事件
img.addEventListener("load",loadHandler);
//图片加载事件
function loadHandler(){//移除load事件，要吗都会在缓存中挂载
img.removeEventListener("load",loadHandler);
//重新实例化img对象
img=new Image();
num++;
if(num>6){
return;
}
//给img再次添加load事件，并调用自身 递归函数 也是回调函数
img.addEventListener("load",loadHandler);
//在把下一张图片添加进来 就可以了
img.src="./image/icon/"+num+".gif";
}
</script>
</body>
</html>
第二种方式，在第一种的基础上 给img对象 添加属性 方便后期调用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//首先把图片存入数组中
var arr=[];
for(i=1;i<=6;i++){
arr.push("./image/icon/"+i+".gif");
}
//执行这个函数，参数1 为当前存入图片的数组，参数2为回调函数，执行完getImage函数后调用callbackFun
getImage(arr,callbackFun);
function getImage(arr,callback){
//创建图片对象
var img=new Image();
//给图片对象添加 arr num imagelist callback的属性，方便后面使用
img.arr=arr;
img.num=0;
img.imageList=[];
img.callback=callback;
//给图片添加事件
img.addEventListener("load",loadHandler);
//加载当前第1张图片 num=0 就是数组中的1
img.src=arr[img.num];
}
//图片加载事件
function loadHandler(){
//把img下面的imagelist属性 push的对象
this.imageList.push(this);
//num增加
this.num++;
if(this.num>5){
//这里的callback回调函数，就是我们传递进去需要显示imagelist用的
this.callback(this.imageList);
return
}
//加载下一张图片
this.src=this.arr[this.num];
}
function callbackFun(arr){
console.log(arr);
}
</script>
</body>
</html>
图片预加载封装，其实就是把上面的代码 单独写在一个js文件中，通过引用的方式来调用 注意代码中的this
新建一个Yimage.js文件
function getImage(arr,callback){ //创建图片对象 var img=new Image(); //给图片对象添加 arr num imagelist callback的属性，方便后面使用 img.arr=arr; img.num=0; img.imageList=[]; img.callback=callback; //给图片添加事件 img.addEventListener("load",this.loadHandler); //加载当前第1张图片 num=0 就是数组中的1 img.src=arr[img.num]; } //图片加载事件 function loadHandler(){ //把img下面的imagelist属性 push的对象 this.imageList.push(this); //num增加 this.num++; if(this.num>5){ //这里的callback回调函数，就是我们传递进去需要显示imagelist用的 this.callback(this.imageList); return } //加载下一张图片 this.src=this.arr[this.num]; }
index主文件中的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/Yimage.js" ></script>
</head>
<body>
<script>
var arr=[];
for(i=1;i<=6;i++){
arr.push("./image/icon/"+i+".gif");
}
getImage(arr,callbackfun);
function callbackfun(arr){
console.log(arr.src);
}
</script>
</body>
</html>