js实现图片预加载

什么是预加载：
　　当页面打开图片提前加载，而且缓存在用户本地，需要用届时直接进行烘托；在浏览图片较多的网页（百度图库，淘宝京东等），能够有更好的用户体会；
　　一张图片的预加载

var img=new Image();

    img.addEventListener("load",loadHandler);

    img.src="./img/1.jpg";

    document.body.appendChild(img);

    console.log(img.width)；

 

    function loadHandler(e){
   

      console.log(img.width);//当前图片的原始宽度

    }

上面代码中，图片还没加载完结打印图片的宽度时，图片宽度为0；只有等图片加载完结后并写入DOM树烘托后，才去触发load事情的回调函数，才干打印出图片的宽度；
　　加载多张图片时，要提前在本地进行缓存，下面要讲三种预加载多张图片的例子：
　　第一种：load预加载
　　加载100张图片，且图片名为1.jpg~100.jpg（下同）；

var num=1;

    var list=[];

    loadImage();

    function loadImage(){
   

      var img=new Image();

      img.addEventListener