js实现图片预加载-tutorial js-php.cn

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);//当前图片的原始宽度 }

Salin selepas log masuk

上面代码中，图片还没加载完成打印图片的宽度时，图片宽度为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事件 }

Salin selepas log masuk

上面代码表示：

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(); }); }

Salin selepas log masuk

以上代码表示：

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);//打印图片数组 })

Salin selepas log masuk

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

说明：

1、fn 这个函数使用async 表示这个函数是一个异步函数

2、这个函数中就可以使用await ，await作用就是让异步变为同步等待，异步变成了阻塞式等待

3、当异步全部完成时，再继续向后运行

4、async函数中的await后面只能跟的时Promise对象

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

推荐教程：js入门教程

Atas ialah kandungan terperinci js实现图片预加载. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!