預(yù)加載，字面意思就是提前加載唄；其實(shí)在項(xiàng)目中預(yù)加載就是這樣，預(yù)加載一般用在含有大量圖片頁面或者項(xiàng)目里，因?yàn)閳D片太多，而且每一張加載都需要時(shí)間，這就有可能出現(xiàn)，在頁面加載完成的情況下，圖片顯示不出來，頁面只有文字。這就會(huì)明顯降低用戶的體驗(yàn)感，因此預(yù)加載就應(yīng)運(yùn)而生，也就是說，在頁面加載的時(shí)候，提前加載圖片，當(dāng)用戶需要查看時(shí)可直接從本地緩存中渲染。
//js代碼
import default class LoadImage extends eventTarget{
num = 0;
list;
finishArr = [];
callback;
static IMG_FINISH = "img_finish";
//以上都是定義變量
constructor(list,bathPath,expandName,_callback){
if(bathPath.constructor === Function){
this.bathPath = _callback;
this.list = this.changeList(list);
//如果bathPath是一個(gè)函數(shù)，可以當(dāng)作回調(diào)函數(shù)去使用
}else{
this.callback = _callback;
this.list = this.changeList(list,bathPath,expandName);
}
this.LoadImage();//預(yù)加載
}
changeList(list,bathPath,expandName){
if(bathPath){
bathPath = bathPath.endWith("/") ?bathPath:bathPath + "/";
//用三目判斷bathPath的最后一位是不是帶有"/"
list = list.map(item=>bath+item);
//遍歷數(shù)組，給數(shù)組中每一個(gè)元素添加bathPath
}
if(expandName){
list = list.map(item=>{
var exNames = item.split(".");
//判斷擴(kuò)展名是否存在，存在的話遍歷數(shù)組用"."切割
if(/jpg|png|jpeg|bmp|gif|webp/i.test(exNames[exNames.length-1])) return item + expandName;
判斷數(shù)組里面的第一項(xiàng)是否是jpg|png|jpeg|bmp|gif|webp其中的一種
return item + (expandName.includes(".") ? expandName : "." + expandName);
})
}
return list;
}
LoadImage(){
var img = new Image();
img.addEventListener("load",e=>this.loadHandler);
//給每一張照片綁定一個(gè)加載事件
img.src = this.list[0];
}
loadHandler(e){
var img = e.currentTarget;
var loadImg = this.finishArr.push(img.cloneNode(false));
this.num++；
if(this.num > this.list.length-1){
img.removeEventListener("load",e=>this.loadHandler);
e=>this.loadHandler = null;
//如果加載完，刪除load事件，并且設(shè)置為null
if(callback){
this.callback(this.finishArr);
//如果回調(diào)函數(shù)存在，傳參
}else{
var evt = new Event(LoadImage.IMG_FINISH);
evt.list = this.finishArr;
this.dispathevent(evt);
不存在的話生成一個(gè)事件，并且拋發(fā)給eventTarget
}
}
}
//html代碼
<!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 type="module">
//其實(shí)bashPath和expandName完全可以不用加，但是這些數(shù)據(jù)，也就是說該加載那些照片，用戶給到的數(shù)據(jù)格式是咋樣的，給到的照片地址是否有"./img/"或者擴(kuò)展名,這些因素都是我們要考慮周全的，這樣后期就沒必要多次或者大量修改代碼。
import LoadImage from './js/LoadImage.js';
var arr = ["3-", "4.jpg", "5-"]；
var basePath = "./img/";
var expandName = ".jpg";
let load = new LoadImage(arr, basePath, expandedName);//執(zhí)行LoadImage
load.addEventListener(LoadImage.IMAGE_FINISH, callBack)//偵聽IMAGE_FINISH事件
function callBack(e) {
console.log(e.list);//可以看出照片是否加載完成
}
</script>
</body>
</html>
