ES6之promise比赛案例

var arr = [
					"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c0c05274f2fbb55fbccb89622f798907.jpg?w=632&h=340",
					"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b746a4db2e0473cc076a3a4b9bbe0235.jpg?w=632&h=340",
					"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/816a66edef10673b4768128b41804cae.jpg?w=632&h=340"
				]
				//同时加载这三张图片,那张图片加载快,只显示那张图片 race比赛
		function loadimg(url){
			//返回一个promise实例
			return new Promise((resolve,reject)=>{
				var img=document.createElement('img');
				//创建一个图片节点
				img.src=url;//设置src
				img.width=200;//设置宽度
				img.onload=function(){
					//图片加载完毕
					resolve(img);//返回图片
				}
				img.onerror=function(e){
					reject(e)//失败e失败事件对象
				}
			})
		}
		//promise.race 比赛 那个promise最先 resolve返回那个
		Promise.race([
			loadimg(arr[0]),
			loadimg(arr[1]),
			loadimg(arr[2])
		])
		.then(res=>{
			document.body.append(res)
			//插入到body标签里面
		})
		.catch(err=>console.error(err))
		//如果失败打印失败的元素

你可能感兴趣的:(javascript,css3,jquery)