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("load",loadHandler);       img.src="./img/"+num+".jpg";     }     function loadHandler(e){       list.push(this.cloneNode());//复制当前图片元素       num++;       if(num>100){console.log(list);return;}       this.src="./img/"+num+".jpg"; //修改地址继续后触发load事件     }

上面代码表示：

第二种：生成器函数实现预加载

function loadImage(src){     return new Promise(function(resolve,reject){       let img=new Image();       img.onload=function(){          resolve(img);//加载时执行resolve函数       }       img.onerror=function(){          reject(src+'这个地址错误');//抛出异常时执行reject函数       }       img.src=src;     })   }   function* fn(){     for(let i=1;i<100;i++){       yield loadImage("./img/"+i+".jpg");     }   }   let s=fn();   let value=s.next().value;    resume();   function resume(){     value.then(img=>{       console.log(img);//打印加载的图片标签       value=s.next().value;       if(value)resume();     });   }

以上代码表示：

1、执行生成器函数并且一次执行loadImage 函数；

2、在Promise中创建图片；

3、判断图片是否可以加载，加载成功执行Promise的回调函数resolve；

4、执行一次resume函数，并在函数里面执行Promise在resolved状态下的函数

5、反复执行s.next().value，直到全部图片加载完成；

第三种：async/await预加载图片

function loadImage(src){     let p=new Promise(function(resolve,reject){       let img=new Image();       img.onload=function(){//加载时执行resolve函数         resolve(img);       }       img.onerror=function(){         reject(src);       }       img.src=src;     })     return p;   }   async function fn(){     let arr=[];     for(let i=3;i<80;i++){       await loadImage(`./img/${i}-.jpg`).then(img=>{         arr.push(img);       });     }     return arr;   }   fn().then(list=>{     console.log(list);//打印图片数组   })

这种方法是ES6的方法用到了async和await将异步转换为阻塞式同步；

说明：

5、async函数执行后返回的是一个Promise对象

推荐教程：js入门教程

以上就是js实现图片预加载的详细内容，更多内容请关注技术你好其它相关文章！