多张图片加载完成后再执行某事件

最新推荐文章于 2023-11-25 14:49:47 发布

Cheer_921

最新推荐文章于 2023-11-25 14:49:47 发布

阅读量549

点赞数

分类专栏： es6 文章标签： javascript es6 前端

本文链接：https://blog.youkuaiyun.com/qq_34151837/article/details/120049131

版权

es6 专栏收录该内容

8 篇文章

订阅专栏

使用Promise.all

const loadImg = src => {
	return new Promise((resolve, reject) => {
		const img = new Image();

		img.src = src;

		img.onload = ()=>void resolve(img);
		img.onerror = ()=>void reject('加载失败');
	});
};

const imgs = [
	'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1526734981&di=fe12efe9e3a76bd3bb5ac202a3c76823&imgtype=jpg&er=1&src=http%3A%2F%2Fd15.lxyes.com%2F15xm%2Fact%2F20151105%2F20%2F99112408.jpg',
	'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1252816855,3131381110&fm=27&gp=0.jpg',
	'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1906477750,651116720&fm=27&gp=0.jpg'
];

Promise.all(imgs.map(src => loadImg(src))).then(arr => {
	console.log(arr);
});