案例 - 图片预加载

朱雀 2023-06-29 02:21 375阅读 0赞

# 0- 零 - 预加载 #

1.什么是预加载  
资源预加载是另一个性能优化技术，我们可以使用该技术来预先告知浏览器某些资源可能在将来会被使用到。预加载简单来说就是将所有所需的资源提前请求加载到本地，这样后面在需要用到时就直接从缓存取资源。

2.为什么要用预加载  
在网页全部加载之前，对一些主要内容进行加载，以提供给用户更好的体验，减少等待的时间。否则，如果一个页面的内容过于庞大，没有使用预加载技术的页面就会长时间的展现为一片空白，直到所有内容加载完毕。

3.预加载 和懒加载都基于预加载基础

4.图片src地址更改就会 触发load事件重新加载

# Ⅱ - 贰 - 预加载代码 #

## 一 index.html ##

### （1）实例化Loadlmage.js ###

var load=new Loadlmage(arr,basePath,expandedName)

*  arr: 图片的名字
 *  basePath:图片的路径
 *  expandedName:图片的后缀
 *  callBack:回调函数

### （2）关于第四个参数 ###

\*\*第一种获取的数据的方式：\*\*在填写的情况下

var load=new Loadlmage(arr,basePath,expandedName,function(e) { 
          return e.list;
        })
        console.log(load);

打印：

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1zaMrHPO-1595666940014)(C:\\Users\\幻影旅团\\AppData\\Roaming\\Typora\\typora-user-images\\image-20200724210524411.png)\]

\*\*第二种获取的数据的方式：\*\*在不填写的情况下通过事件的监听获取

var load=new Loadlmage(arr,basePath,expandedName)
        load.addEventListener(Loadlmage.IMAGE_FINISH,callBack);
    
        function callBack(e){ 
          console.log(e.list);
        }

<!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"> import Loadlmage from "./js/Loadlmage.js"; var arr=["3-","4.jpg","5-"] var basePath="./img/"; var expandedName=".jpg"; var load=new Loadlmage(arr,basePath,expandedName) load.addEventListener(Loadlmage.IMAGE_FINISH,callBack); function callBack(e){ console.log(e.list); } </script>
    </body>
    
    </html>

## 二 Loadlmage.js ##

/* 预加载 */
    //继承EventTarget 用于抛发事件
    export default class Loadlmage extends EventTarget { 
    
      list;//存放图片的完整路径
      num = 0;//累加器 用于list 下标
      finishArr = [];//存放加载完的图片
      callBack;//第四个参数 回调函数
      static IMAGE_FINISH = "imgFinish";//抛发的事件名称
    
      /* 参数：list： 图片数组 basePath：图片的路径 expandedName:图片后缀 _callBack：回调函数为加载完的数据 */
      constructor(list, basePath, expandedName, _callBack) { 
        super();//继承必须执行
        //判断第二个参数是不是个方法
        // 如果是的就把他赋值给this.callBack
        if (basePath.constructor === Function) { 
          this.callBack = basePath;// 是个回调函数 返回finishArr 存放加载完的图片
          this.list = this.changeList(list);//执行根据参数 合并路径方法
    
        } else { 
          this.callBack = _callBack;//第四个参数赋值到全局变量
          this.list = this.changeList(list, basePath, expandedName)；//存放完整的路径 是个数组
    
        }
        this.loadImage();//创建图片函数
    
      }
    
      //根据参数 合并路径
      changeList(list, basePath, expandedName) { 
        //判断图片路径是否添加/ 
        if (basePath) { 
          basePath = basePath.endsWith("/") ? basePath : basePath + "/";
          list = list.map(item => basePath + item);
        }
        //判断图片后缀
        if (expandedName) { 
          list = list.map(item => { 
            var names = item.split(".");
            if (/jpg|png|jpeg|bmp|gif|webp/i.test(names[names.length - 1])) return item;
            //后缀没有加 . 会给追加上
            return item + (expandedName.includes(".") ? expandedName : "." + expandedName)
          })
        }
        //图片的完整路径
        return list;
      }
    
    
      //创建图片 img
      loadImage() { 
        var img = new Image();
        //存放事件函数 用于之后删除事件
        this.loadFn = e => this.loadHandler(e);
        //给图片 绑定个 加载事件 既页面加载的时候就执行
        img.addEventListener("load", this.loadFn);
        //每个图片添加路径 list的数据 现在是下标为零的第一张图片 图片路径更换会自动执行 load
        img.src = this.list[this.num];
      }
    
      //img 加载事件函数
      loadHandler(e) { 
        //获取 监听的对象 img
        var img = e.currentTarget;
    
    
        // 复制当前的img对象 给this.finishArr，num加一 会使得img路径更换 据需执行
        this.finishArr.push(img.cloneNode(false));
        this.num++;
    
        if (this.num > this.list.length - 1) { 
          img.removeEventListener("load", this.loadFn);//清空事件
          this.loadFn = null;
          //执行到这图片就全部加载完毕了
    
          //第四个参数的回调函数
          if (this.callBack) { 
            this.callBack(this.finishArr);//可以通过方法获取 图片数据 
          } else { 
            //如果没有填入第四个参数 则使用抛发事件
            // console.log(this.finishArr)
            var evt = new Event(Loadlmage.IMAGE_FINISH);
            evt.list = this.finishArr;//可以通过回调获取 e.list
            this.dispatchEvent(evt)
          }
        }
    
        //下标num 的变化会重新执行load事件
        img.src = this.list[this.num];
      }
    
    }

# 0 - 0 - 知识点： #

## 一 类抛发事件 ##

在类里面使用抛发事件向外传输类里面的数据需要继承*EventTarget*，（父传子）

div的继承树 ===Object–>EventTarget–>Node–>Element–>HTMLElement–>HTMLDivElement

因为事件都是在DOM里面进行的 所以需要继承*EventTarget*向下传

## 二 类 全局变量 ##

Loadlmage类：全局变量

list;//存放图片的完整路径

num = 0;//累加器 用于list 下标

finishArr = \[\];//存放加载完的图片

callBack;//第四个参数 回调函数

static IMAGE\_FINISH = “imgFinish”;//抛发的事件名称