Promise实现多图预加载
Posted 张玉宝
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Promise实现多图预加载相关的知识,希望对你有一定的参考价值。
Promise正如它的中文意思“承诺”一样,保存着未来会发生事件(一般为异步操作)。Promise避免了“回调地狱”,写法更加接近同步操作。说到同步,我更加喜欢async、await,它们书写更贴近同步操作。
图片加载往往是异步的,如果有操作需要等到所有的图片加载完之后再执行,这时候就需要不断的监听所有图片的加载情况。
ES5
利用ES5实现多图预加载,可以通过计数器判断有多少图片加载完成。
var count = 0, // 计数器 imgs = [];
/*
* (Array)source 图片url
* (Fun)cb 回调
*/ function preLoadImg(source, cb) { source.forEach(function(url, i) { imgs[i] = new Image(); imgs[i].onload = function() { if(++count === source.length) { cb && cb(); } } imgs.src = url; }) }
ES6
ES6原生提供了Promise对象,接下来用Promise改写上面的代码。
// 预处理图片 function preLoadImg(source){ let pr = []; source.forEach(url => {// 预加载图片 let p = loadImage(url) .then(img => this.images.push(img)) .catch(err => console.log(err)) pr.push(p); }) // 图片全部加载完 Promise.all(pr) .then(() => { // do sth }); } // 预加载图片 function loadImage(url) { return new Promise((resolve, reject) => { let img = new Image(); img.onload = () => resolve(img); img.onerror = reject; img.src = url; }) }
Promise实际上是将回调操作独立出来,当Promise状态从pending(进行中)改为resolved(已完成),then注册的函数就会被执行,如果状态从pending改为rejected(已失败),就会被catch捕获。
这里想Promise.all传入了一个Promise数组,数组中的Promise状态均为resolved,Promise.all的状态才会是resolved,否则Promise.all的状态为rejected。也就是说,当所有图片加载完成后,才会执行then中的函数。为了防止有图片加载失败,阻塞后续操作,为每一个p添加catch,捕获reject,Primise.all就接受不到了。
以上是关于Promise实现多图预加载的主要内容,如果未能解决你的问题,请参考以下文章
关于js----------------分享前端开发常用代码片段