圖片預載入
阿新 • • 發佈：2020-09-09
第一種方法，非同步回撥，執行完這個函式，在回撥<!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>
//建立陣列 用於儲存圖片的物件
//新增這個圖片
arr.push(img);
//給物件img 新增載入事件
img.addEventListener("load",loadHandler);
//圖片載入事件
function loadHandler(){//移除load事件，要嗎都會在快取中掛載
第二種方式，在第一種的基礎上 給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>