promise加载图片

 

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

 

posted @ 2020-07-08 01:38  是桂  阅读(475)  评论(0)  编辑  收藏  举报