扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
这篇文章主要讲解了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事件
}上面代码表示：
1、创建一张图片；
2、给这个图片增加事件侦听load；
3、加载完成后,将加载进来的图片复制一个新的,放在数组中；
4、修改num；如果num的值大于100停止执行，并且打印数组；
5、给这个图片的地址赋予一个新地址,因为改变图片的地址就会重新触发load，所以会继续进入loadHandler函数,不断加载,直到加载完成。
第二种：生成器函数实现预加载
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将异步转换为阻塞式同步；
说明：
1、fn 这个函数使用async 表示这个函数是一个异步函数
2、这个函数中就可以使用await ，await作用就是让异步变为同步等待，异步变成了阻塞式等待
3、当异步全部完成时，再继续向后运行
4、async函数中的await后面只能跟的时Promise对象
5、async函数执行后返回的是一个Promise对象
看完上述内容，是不是对JS如何实现图片预加载有进一步的了解，如果还想学习更多内容，欢迎关注创新互联行业资讯频道。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网