前端图片预加载

前端页面的用户体验对于一个网站来说是至关重要的，让在可视区域的图片立即加载进来，而让不在可视区域并且需要通过滚动条进行滚动显示的图片在图片滚动到可视区域内再显示出来，

几乎等价创建一个img标签
var img = new Image(); //1
var img = document.createElement("img");  //2

图片加载需要时间
img.src = "./img/2.img";
console.log(img.width);  0 一段时间后显示宽度 1024
将图片加载完成，才能知道宽高

img.onload = function(){
	console.log(img.width,)
}

var list = [];
for(var i=2;i<80;i++){
	var img=new Image();
	img.src="./img/"+i+"-.jpg";
	img.onload=function(){
		list.push(img);
	}
}
console.log(list);

打印出来[]
点开箭头，里面有2-79张的图片，但是图片的地址都是./img/79-.jpg

原因：图片的加载都是异步过程，当第一张图片加载完成，循环已经结束了，src是./img/79-.jpg。异步操作的img是个局部变量，循环时不断覆盖。

var list = [];
for(var i=2;i<80;i++){
	var img=new Image();
	img.src="./img/"+i+"-.jpg";
	img.onload=function(){
		list.push(this);
	}
}
console.log(list);//图片大小不同，加载所需时间不同

this指的是谁侦听事件this指向什么。
运行出来结果，图片加载顺序不是顺序。

var i = 2;
var list = [];
function loadimage() {
  var img = new Image();
  img.src = "./img/" + i + "-.jpg";
  img.addEventListener("load", loadHandler);
}
function loadHandler(e) {
  list.push(this);
  i++;
  if (i > 79) return finishHandler(); //图片加载完毕执行的函数
  loadimage();
}
loadimage();
function finishHandler() {
  list.forEach((item) => console.log(item.src));
}//顺序加载

图片预加载 当暂时不使用图片时，预先加载完成，等待使用时调用
事件没删除
load事件

1. 当页面完全加载后（包括所有图像、JavaScript文件、CSS文件等外部资源），就会触发window上面的load事件.
2. 当图像加载完毕时在img元素上触发load事件。
   图片的src属性变化会触发load事件

var i = 2;
var list = [];
function loadimage() {
  var img = new Image(); //img是个dom元素，对象，引用类型，
  img.src = "./img/" + i + "-.jpg";
  img.addEventListener("load", loadHandler);
}
function loadHandler(e) {
  list.push(this); //this 放进去的是同一张图片 引用地址是一样的，只是改变了图片的src属性
  i++;
  if (i > 79) return finishHandler();
  this.src = "./img/" + i + "-.jpg"; //图片的src属性变化会触发load事件
}
loadimage();
function finishHandler() {
  //引用地址是一样的，最后打印才去引用地址里面拿数据，所以src属性都是79
  list.forEach((item) => console.log(item.src));
} //执行结果放进数组的全是一张图片./img/79-.jpg

所以需要复制dom元素，没有引用关系

var i = 2;
var list = [];
function loadimage() {
  var img = new Image();
  img.src = "./img/" + i + "-.jpg";
  img.addEventListener("load", loadHandler);
}
function loadHandler(e) {
  list.push(this.cloneNode(false));
  i++;
  if (i > 79) {
    this.removeEventListener("load", loadHandler);
    return finishHandler();
  }
  this.src = "./img/" + i + "-.jpg"; //图片的src属性变化会触发load事件
}
loadimage();
function finishHandler() {
  list.forEach((item) => console.log(item.src));
}//完成图片顺序加载

此时，还是不好，有全局变量，有耦合性

消除全局变量
function loadImage() {
  var img = new Image();
  img.i = 2;
  img.list = [];
  img.src = "./img/" + img.i + "-.jpg";
  img.addEventListener("load", loadHandler);

function loadHandler(e) {
  this.list.push(this.cloneNode(false));
  this.i++;
  if (this.i > 79) {
    this.removeEventListener("load", loadHandler);
    return finishHandler(this.list);
  }
  this.src = "./img/" + this.i + "-.jpg";
}
loadImage();
function finishHandler(list) {
  list.forEach((item) => console.log(item.src));
}

优化代码：

      function loadImage(sourceArr, callback, basePath, extension) {
        if (basePath === undefined) basePath = "";
        if (basePath.length > 0 && basePath.slice(-1) !== "/") basePath += "/";
        if (extension === undefined) extension = "";
        if (extension.length > 0 && extension.slice(0) !== ".") extension = "."+extension;
        sourceArr = sourceArr.map(function (item) {
          if (!item.includes("/")) item = basePath + item;
          if(!["jpg","jpeg","png","bmp","gif","webp"].includes(item.split(".").pop()))
            item+=extension;
          return item;
        });
        var img=new Image();
        img.sourceArr=sourceArr;
        img.callback=callback;
        img.list=[];
        img.src=sourceArr.shift();//删除数组第一项
        img.addEventListener("load",loadHandler);
        // console.log(sourceArr);
      }
      function loadHandler(e) {
        this.list.push(this.cloneNode(false));
        //不断删除数组第一项，知道所有图片数组都删除完
        if(this.sourceArr.length===0){
          this.removeEventListener("load",loadHandler);
          if(this.callback&&typeof this.callback==="function"){
            this.callback(this.list);//将图片数组传入回调函数
          }else{//没有回调函数
            var evt = new Event("img_load_finish");//图片加载完成的事件
            evt.list=this.list;
            document.dispatchEvent(evt);
          }
          return;
        }
        this.src=this.sourceArr.shift();
      }

      //参数： 1.要加载的图片（可能是一个（字符串），也能是多个（数组））（必填）
      //2.考虑基础路径 ./img/ 可能有也可能没有 有基础路径就不加
      //3.扩展名 图片类型 jpg jpeg png bmp gif 有扩展名就不加
      //4.回调函数 图片加载完毕后执行的函数 (必填)
      var arr = [];
      for (var i = 2; i < 80; i++) {
        arr.push(i + "-");
      }
      arr.push("./imgs/1.png");
      arr.push("./imgs/2.png");
      // console.log(arr);
      //有回调函数时调用测试
      // loadImage(arr, finishHandler,"./img", "jpg");
      // function finishHandler(list) {
      //    list.forEach((item) => console.log(item.src));
      // }
      //没有回调函数时调用测试
      loadImage(arr,undefined,"./img", "jpg");
      document.addEventListener("img_load_finish",finishLoad);
      function finishLoad(e){
        e.list.forEach((item) => console.log(item.src,item.width,item.height));
      }