实现一个图片的加载；设置第一张图片加载1s之后加载第二张图片:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>2-4编程练习</title>
</head>
<body>
<script>
//获取body元素
let el = document.querySelector('body');
//设置一个函数,把图片的url地址作为参数
function img(url){
//实例化promise对象
return new Promise(resolve => {
setTimeout(function(){
//建立图像对象
var img = document.createElement('img');
//设置图片的地址
img.setAttribute('src',url);
//把图片节点插入到body中
el.append(img);
//图片加载完成后执行resolve
resolve();
},1000)
})
}
img('http://climg.mukewang.com/5b16558d00011ed506000338.jpg')
.then(function(){
console.log(2);
return img('http://climg.mukewang.com/5b165603000146ca06000338.jpg')
})
.then(function(){
console.log(3)
return img('http://climg.mukewang.com/5b1656140001c89906000338.jpg')
})
</script>
</body>
</html>