zoukankan      html  css  js  c++  java
  • promise实现图片按照指定的加载顺序执行(串联操作)

    promise实现图片按照指定的加载顺序执行,先加载第二张,再加载第一张,最后加载第三张

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>promise</title>
    </head>
    <body>
    
    </body>
    <script>
        function loadImg(src) {
            var promise = new Promise(function (resolve, reject) {
                var img = document.createElement('img');
                img.onload =function () {
                    resolve(img)
                }
                img.onerror =function () {
                    reject()
                }
                img.src =src
            })
    
            return promise;
        }
        
    //promise实现先加载第二张图片,再加载第一张图片,最后加载第三张图片
    
        var src1='https://img.mukewang.com/5dccac000001839c18720764.jpg';  //1872 764
        var result1 = loadImg(src1);
    
        var src2 ='https://img3.mukewang.com/szimg/5dbffa9109ef425a12000676-360-202.png'; //360 202
        var result2 =loadImg(src2);
    
        var src3 ='https://www.imooc.com/static/img/index/logo.png'; //200 80
        var result3 =loadImg(src3);
    
        result2.then(function (img) {
            console.log('第二个图片加载完成',img.width,img.height)
            return result1
        }).then(function (img) {
    
            console.log('第一个图片加载完成',img.width,img.height)
            return result3
        }).then(function (img) {
    
            console.log('第三个图片加载完成',img.width,img.height)
            // return result2
        }).catch(function (ex) {
            console.log(ex)
            
        })
    </script>
    </html>

     执行顺序结果

  • 相关阅读:
    Shader-另类实现
    Unity3d- 资源
    我不快乐
    陷入了一个NGUI自适应的一个坑
    ngui 自适应
    NGUI的数据绑定
    我已经很努力,但是依旧写给自己
    那些奇葩的叫法
    C#修改类模板
    开启Unity3D之旅
  • 原文地址:https://www.cnblogs.com/malong1992/p/11967092.html
Copyright © 2011-2022 走看看