promise的使用

最新推荐文章于 2024-03-12 08:36:31 发布

绿蚁新醅酒红泥小火炉

最新推荐文章于 2024-03-12 08:36:31 发布

阅读量152

点赞数

分类专栏： es6 文章标签： es6

本文链接：https://blog.csdn.net/u013006851/article/details/90107721

版权

es6 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<script>
    //补充代码
	//我们来实现一个图片的加载；设置第一张图片加载1s之后加载第二张图片，可参考如下效果图：	
	//http://climg.mukewang.com/5b16558d00011ed506000338.jpg
	//http://climg.mukewang.com/5b165603000146ca06000338.jpg 
	//http://climg.mukewang.com/5b1656140001c89906000338.jpg 
	//第一步：设置一个函数，把图片的url地址作为参数
	//第二步：实例化promise对象
	//第三步：建立图像对象；设置图片的地址；把图片节点插入到body中
	//第四步：图片加载完成后执行resolve 
	function appendImg(url)
	{
		return new Promise((resolve)=>{
			let img = document.createElement("img");
			img.src=url;
			document.querySelector("body").append(img);
			//setTimeout(()=>{
			//	resolve();
			//},500);
			img.onload=()=>{
				resolve();
			}
			
		})
	}
	appendImg("http://climg.mukewang.com/5b16558d00011ed506000338.jpg").then(function(){
		return appendImg("http://climg.mukewang.com/5b165603000146ca06000338.jpg");	
	}).then(function(){
		appendImg("http://climg.mukewang.com/5b1656140001c89906000338.jpg");
	});
</script>
</body>
</html>

绿蚁新醅酒红泥小火炉

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
promise的使用

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>Document</title></head><body><script> //补充代码 //我们来实现一个图片的加载...
复制链接

扫一扫

专栏目录