js中面向对象的预加载

预加载，字面意思就是提前加载呗；其实在项目中预加载就是这样，预加载一般用在含有大量图片页面或者项目里，因为图片太多，而且每一张加载都需要时间，这就有可能出现，在页面加载完成的情况下，图片显示不出来，页面只有文字。这就会明显降低用户的体验感，因此预加载就应运而生，也就是说，在页面加载的时候，提前加载图片，当用户需要查看时可直接从本地缓存中渲染。

//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是一个函数，可以当作回调函数去使用
}else{
this.callback = _callback;
this.list = this.changeList(list,bathPath,expandName);
}
this.LoadImage();//预加载
}
changeList(list,bathPath,expandName){
if(bathPath){
bathPath = bathPath.endWith("/") ?bathPath:bathPath + "/";
//用三目判断bathPath的最后一位是不是带有"/"
list = list.map(item=>bath+item);
//遍历数组，给数组中每一个元素添加bathPath
}
if(expandName){
list = list.map(item=>{
var exNames = item.split(".");
//判断扩展名是否存在，存在的话遍历数组用"."切割
if(/jpg|png|jpeg|bmp|gif|webp/i.test(exNames[exNames.length-1])) return item + expandName;
判断数组里面的第一项是否是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);
//给每一张照片绑定一个加载事件
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事件，并且设置为null
if(callback){
this.callback(this.finishArr);
//如果回调函数存在，传参
}else{
var evt = new Event(LoadImage.IMG_FINISH);
evt.list = this.finishArr;
this.dispathevent(evt);
不存在的话生成一个事件，并且抛发给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">
//其实bashPath和expandName完全可以不用加，但是这些数据，也就是说该加载那些照片，用户给到的数据格式是咋样的，给到的照片地址是否有"./img/"或者扩展名,这些因素都是我们要考虑周全的，这样后期就没必要多次或者大量修改代码。
        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);//执行LoadImage
        load.addEventListener(LoadImage.IMAGE_FINISH, callBack)//侦听IMAGE_FINISH事件
        function callBack(e) {
            console.log(e.list);//可以看出照片是否加载完成
        }
    </script>
</body>
</html>

最后编辑于：2020.08.13 20:21:10