本文主要介绍JS图像预加载的三种实现方法的分析，并通过示例代码进行详细介绍。对大家的学习或者工作都有一定的参考价值，有需要的朋友可以参考一下。
预加载的基本概念：页面打开时，图片是预先加载的，由用户缓存在本地，需要时可以直接渲染；浏览图片较多的网页(百度图库、淘宝JD.COM等)可以有更好的用户体验。);
一张图片的预加载
var img=new Image()；
img.addEventListener('load '，loadHandler)；
img.src='。/img/1 . jpg '；
document . body . appendchild(img)；
console . log(img . width)；
函数loadHandler(e){
console . log(img . width)；//当前图片的原始宽度
}
在上面的代码中，当打印图片的宽度还没有加载时，图片的宽度为0；只有图片加载写入DOM树进行渲染后，才能触发load事件的回调函数打印出图片的宽度；
加载多个图像时，提前在本地缓存。以下是预加载多个图像的三个示例：
第一种：load预加载
加载100张图片，图片名称为1.jpg~100.jpg(下同)；
var num=1；
var list=[]；
loadImage()；
函数loadImage(){
var img=new Image()；
img.addEventListener('load '，loadHandler)；
img.src='。/img/' num '。jpg '；
}
函数loadHandler(e){
list . push(this . clone node())；//复制当前图片元素
num
if(num 100){ console . log(list)；返回；}
this.src='。/img/' num '。jpg '；//地址修改继续后触发load事件。
}
上述代码表明：
1.创建一个图片；
2.添加事件侦听负载；到这张图；
3.加载完成后，复制一个新的已加载的图像放入数组中；
4.修改编号；如果num的值大于100，则停止执行并打印数组；
5.给这个图片的地址一个新的地址。因为改变图片的地址会再次触发加载，所以会继续进入loadHandler函数，一直加载，直到加载完成。
第二种：生成器功能实现预加载。
函数loadImage(src){
返回新承诺(功能(解决，拒绝){
设img=new Image()；
img.onload=function(){
解决(img)；//加载时执行解析函数
}
img.onerror=function(){
Reject(src '这个地址不对')；//抛出异常时执行reject函数
}
img.src=src
})
}
函数* fn(){
for(设I=1；i100i ){
产生loadImage('。/img/'我'。jpg’)；
}
}
设s=fn()；
设value=s.next()。价值；
resume()；
功能恢复(){
value.then(img={
console . log(img)；//打印加载的图片标签
value=s.next()。价值；
if(值)resume()；
});
}
上述代码表明：
1.同时执行生成器函数和loadImage函数；
2.在《无极》中创造一幅画面；
3.判断图片是否可以加载，加载回调函数resolve成功履行承诺；
4.执行一次resume函数，在函数中执行已解决状态的Promise函数。
5.重复s.next()。值，直到加载完所有图片；
第三种：async/await预加载图片
函数loadImage(src){
设p=新承诺(函数(解决，拒绝){
设img=new Image()；
Img.onload=function(){//加载时执行解析函数
解决(img)；
}
img.onerror=function(){
拒绝(src)；
}
img.src=src
})
返回p；
}
异步函数fn(){
设arr=[]；
for(设I=3；i80i ){
等待loadImage(`。/img/${i}-.jpg `)。然后(img={
arr . push(img)；
});
}
返回arr
}
fn()。然后(list={
console.log(列表)；//打印图片数组
})
这个方法是ES6的方法，使用async和await将async转换成阻塞同步。
描述：
1.fn这个函数使用async来表示这个函数是一个异步函数。
2.await可以用在这个函数中。await的功能是将异步变为同步等待，将异步变为阻塞等待。
3.异步完成后，继续向后运行。
4.在异步函数中，Promise对象后面只能跟await。
5.异步函数执行后，它返回一个Promise对象。
以上三种预加载方式仅供参考；
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。