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>

执行顺序结果

promise实现图片按照指定的加载顺序执行的更多相关文章

  1. SpringBoot系列教程之Bean加载顺序之错误使用姿势辟谣

    在网上查询 Bean 的加载顺序时,看到了大量的文章中使用@Order注解的方式来控制 bean 的加载顺序,不知道写这些的博文的同学自己有没有实际的验证过,本文希望通过指出这些错误的使用姿势,让观文 ...

  2. ios 图片的两种加载方式

    控件加载图片,plist,懒加载,序列帧动画,添加动画效果. IOS中有2种加载图片的方式. 方式一:有缓存(图片所占用的内存会一直停留在程序中) + (UIImage *)imageNamed:(N ...

  3. 《前端之路》之 前端图片 类型 & 优化 & 预加载 & 懒加载 & 骨架屏

    目录 09: 前端图片 类型 & 优化 & 预加载 & 懒加载 & 骨架屏 09: 前端图片 类型 & 优化 & 预加载 & 懒加载 & ...

  4. 页面滚动图片等元素动态加载插件jquery.scrollLoading.js

    如果一个网页很长,那么该页面的加载时间也会相应的较长.而这里给大家介绍的这个jQuery插件scrollLoading的作用则是,对页面元素进行动态加载,通俗的说就是滚到哪就加载到哪,屏幕以下看不见的 ...

  5. android -------- 打开本地浏览器或指定浏览器加载，打电话，打开第三方app

    开发中常常有打开本地浏览器加载url或者指定浏览器加载, 还有打开第三方app, 如 打开高德地图 百度地图等 在Android程序中我们可以通过发送隐式Intent来启动系统默认的浏览器. 如果手机 ...

  6. jQuery页面滚动图片等元素动态加载实现

    一.关于滚动显屏加载 常常会有这样子的页面,内容很丰富,页面很长,图片较多.比如说光棍节很疯狂的淘宝商城页面. 或者是前段时间写血本买了个高档耳机的京东商城页面,或者是新浪微博之类. 这些页面图片数量 ...

  7. Linux命令备忘录：mount用于加载文件系统到指定的加载点

    mount命令用于加载文件系统到指定的加载点.此命令的最常用于挂载cdrom,使我们可以访问cdrom中的数据,因为你将光盘插入cdrom中,Linux并不会自动挂载,必须使用Linux mount命 ...

  8. [转]jQuery页面滚动图片等元素动态加载实现

    本文转自:http://www.zhangxinxu.com/wordpress/?p=1259 一.关于滚动显屏加载 常常会有这样子的页面,内容很丰富,页面很长,图片较多.比如说光棍节很疯狂的淘宝商 ...

  9. spring bean加载顺序指定方式之一

    在某些情况下,我们在容器启动的时候做一些事情,举个例子,加载缓存等.. 此时我们会希望某个bean先被加载并执行其中的afterpropertiesset方法. 因为spring默认是通过contex ...

随机推荐

  1. 【Auto.js images.matchTemplate() 函数的特点】

    Auto.js  images.matchTemplate() 函数的特点 官方文档:https://hyb1996.github.io/AutoJs-Docs/#/images?id=imagesm ...

  2. 纯HTML+JS实现轮播

    <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...

  3. 最小生成树两个经典算法（Prime算法、Kruskal算法） - biaobiao88

    经典的最小生成树例子,Prime算法,具体的步骤及其注释本人均在代码中附加,请仔细阅读与品味,要求,可以熟练的打出. //Prime算法基础 #include<iostream> usin ...

  4. 实测Maven上传jar包到私服的方法归纳

    Hello,各位小伙伴大家好,我是小栈君.好久不见,最近因为工作的缘故,导致了更新变慢,但是小栈君也在积极的做素材的规划,毕竟学习知识点的归纳和提炼需要一定的时间. 所以还请大家多多见谅,下一期的分享 ...

  5. UiPath之如何打印PDF

    各位小伙伴,大家好,今天写一点基础知识,如何在UiPath中打印PDF. ---小U的QQ群(714733686):小U的订阅号[UiPath8888]--- 当然,我们最希望的就是有一个Activi ...

  6. php imagick生成图片需要注意的问题

    php imagick生成图片需要注意的问题 坐标必须写死不要写自适应 这样才能达到效果图的最好效果 而且不会出现各种问题如果前端显示的生成图片不达标 可以再写一套代码 把后台生成的图片透明度设成0 ...

  7. python基础-匿名函数和内置函数

    匿名函数和内置函数 匿名函数:没有名字,使用一次即被收回,加括号就可以运行的函数. 语法:lambda 参数:返回值 使用方式: 将匿名函数赋值给变量,给匿名函数一个名字,使用这个变量来调用(还不如用 ...

  8. HTML和css面试题：内容转载

    1.常见的块级元素 内联元素 div -最常用的块级元素 dl - 和dt-dd 搭配使用的块级元素 form - 交互表单 h1 -h6- 大标题 hr - 水平分隔线 ol – 有序列表 p - ...

  9. python Django框架正式准备工作

    之前由于不太了解数据库方面的知识,但经过一段时间的web应用的开发学习,成功的用其他框架连接了数据库,并完成了相关操作,数据爬取也初识了,更了解了python这门语言的语法,但路还很长,因此现在才能正 ...

  10. C# web项目中sql数据库转sqlite数据库

    最近做了一个小网站,用到了一个使用sql server 2005的.net cms系统,但是现在我所买虚拟主机的服务商,不给虚拟主机提供sql server服务了,那就转数据库吧,转啥好呢,思来想去, ...