es6实现图片全加载完再显示到网页

利用es6的promise的all方法来实现图片全加载好再显示到网页,下面上代码

function loadimg(src){
	return new Promise(function(resolve,reject){
		let img=document.createElement('img');
		img.src=src;
		img.onload=function(){
			resolve(img);
		}
		img.onerror=function(err){
			reject(err);
		}
	})
}
function showimg(imgs){
	imgs.forEach(function(img){
		document.body.appendChild(img);
	})
}
Promise.all([loadimg('http://pic9.997788.com/pic_auction/00/09/38/10/au9381026e.jpg'),loadimg('http://t-1.tuzhan.com/10da2b1e266a/up1/l/2010-03-20/13/timeroy.tuzhan.com_4899c11261d643d088bda1ac5f570e56.jpg'),loadimg('http://img5.duitang.com/uploads/item/201212/14/20121214223133_jYzPn.jpeg')]).then(showimg);

demo看这里

promise的race可以实现只有有一张加载完就显示到网页

function loadimg(src){
	return new Promise(function(resolve,reject){
		let img=document.createElement('img');
		img.src=src;
		img.onload=function(){
			resolve(img);
		}
		img.onerror=function(err){
			reject(err);
		}
	})
}
function showimg(imgs){
		document.body.appendChild(imgs);
}
Promise.race([loadimg('http://pic9.997788.com/pic_auction/00/09/38/10/au9381026e.jpg'),loadimg('http://t-1.tuzhan.com/10da2b1e266a/up1/l/2010-03-20/13/timeroy.tuzhan.com_4899c11261d643d088bda1ac5f570e56.jpg'),loadimg('http://img5.duitang.com/uploads/item/201212/14/20121214223133_jYzPn.jpeg')]).then(showimg);

点我看demo