码迷,mamicode.com
首页 > 其他好文 > 详细

promise加载图片

时间:2020-07-08 09:16:15      阅读:75      评论:0      收藏:0      [点我收藏+]

标签:oct   font   src   ISE   append   实现   cti   sel   selector   

 

实现一个图片的加载;设置第一张图片加载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>
                                                                                                                                       

 

promise加载图片

标签:oct   font   src   ISE   append   实现   cti   sel   selector   

原文地址:https://www.cnblogs.com/rickdiculous/p/13264572.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!