promise加载图片

很久以前，小S同学第一次遇到加载图片问题，是在canvas里面绘图。

那么是什么问题呢？

现象：图片还没来得及加载好会出现空白的问题。
原因：因为图片还没来得及加载好，我们就使用，就出现空白啦。

众所周知，由于我们的js是单线程的，如果只是同步加载，就会出现阻塞。
所以出现了异步加载，异步加载解决阻塞的问题。

图片是文件，加载显示的时候是异步的。promise已经家喻户晓了，那么我们来换promise试试图片加载吧。

直接上代码

function loadImg(src) {
	let p = new Promise((resolve, reject) => {
		var img = new Image();
		img.src = src;

		img.onload = function () {
			resolve(img);
		};
		img.onerror = function (img) {
			reject('加载出错啦');
		};
	});

	return p;
}

let href = 'https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/16/170e231a48117532~tplv-t2oaga2asx-no-mark:64:64:64:64.awebp';

//1
async function test() {
	let img = await loadImg(href);
	console.log(img);
}
test();

//2
loadImg(href).then((img)=>{
    console.log(img);
})

//3
let list = [href,href,href];
let arr =[];

for(let i=0;i<list.length;i++){
    arr.push(loadImg(list[i]));
}
Promise.all(arr).then(list=>{
    console.log('====================')
    console.log(list[0])
})