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. day05整理

    目录 一.上节课回顾 (一)数据类型 (1)数字类型 (2)字符串类型str (3)列表类型list (4)字典类型dict (二)jieba模块 (三)wordcloud模块 二.文本处理 (一)什 ...

  2. Andriod Studio设置类默认签名模板

  3. chrome安装json美化软件 JSONView

    安装效果如下: 安装步骤: 1.下载地址: github地址:https://github.com/gildas-lormeau/JSONView-for-Chrome 2.解压文件 3.打开谷歌浏览 ...

  4. docker-compose下的java应用启动顺序两部曲之二：实战

    上篇回顾 本文是<docker-compose下的java应用启动顺序两部曲>的终篇,在上一篇<docker-compose下的java应用启动顺序两部曲之一:问题分析>中,我 ...

  5. 平时服务正常，突然挂了，怎么重启都起不来，查看日志Insufficient space for shared memory file 内存文件空间不足

    Java HotSpot(TM) 64-Bit Server VM warning: Insufficient space for shared memory file:   /tmp/hsperfd ...

  6. 学习笔记41_Spring.Net

    Spring.Net:由容器负责创建对象,容器读取配置文件来初始化对象,配置文件须符合 Spring.Net范式: 准备材料: Common.Loggin.dll,Spring.Core.dll 第一 ...

  7. OPTIONS 请求引发的分析

    阅读提纲: 为什么会出现 OPTIONS 请求? 什么情况下会出现 OPTIONS 请求? OPTIONS 请求会发送什么内容? 跨域前端访问后端时,所有的 Ajax HTTP 请求都会先发送一个 O ...

  8. java核心编程书上的一个错误

    书上说这段代码说明了java对对象不是采用的按引用调用 这明显错了,java还是引用传递,只是把引用对象的变量复制了,互换了x,y所指的对象,对a,b没有影响

  9. Python基础语法，他其实很贵！

    # -*- coding:utf-8 -*- # @Time :2019/7/19 11:26# @Author :ITester# @Email :1036881587@qq.com# @File ...

  10. vue , debounce 使用

    有时候不想直接在methods中的方法前面加debounce, getFullName: debounce(function() { console.log('my fullname is chent ...