实现一个图片的加载；设置第一张图片加载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加载图片的更多相关文章

  1. jquery的promise实践--连续加载图片

    在javascript设计模式实践之代理模式--图片预加载中用代理模式实现了图片预加载功能. 现在就更进一步,完成一个能够一张一张的连续图片加载的功能. 功能: 1.一张一张加载图片. 2.加载错误, ...

  2. CSS3学习总结——实现瀑布流布局与无限加载图片相册

    首先给大家看一下瀑布流布局与无限加载图片相册效果图: 一.pic1.html页面代码如下: <!DOCTYPE html> <html> <head> <me ...

  3. JQuery实现无刷新下拉加载图片

          最近做的一个项目需要做页面无刷新下拉加载图片,调研了一番,大多都采用检测滚动条达到底部,然后利用ajax加载下一页数据对页面数据进行添加,根据这一逻辑,自己写了一个,具体代码如下: JQu ...

  4. android 网络加载图片，对图片资源进行优化，并且实现内存双缓存 + 磁盘缓存

    经常会用到 网络文件 比如查看大图片数据 资源优化的问题,当然用开源的项目  Android-Universal-Image-Loader  或者 ignition 都是个很好的选择. 在这里把原来 ...

  5. ImageLoader加载图片

    先导universal-image-loader-1.9.3包 在application配置 android:name=".MyApplication" intent权限 1 pa ...

  6. chrome (failed) net::ERR_INCOMPLETE_CHUNKED_ENCODING ashx 加载图片

    chrome (failed) net::ERR_INCOMPLETE_CHUNKED_ENCODING   ashx文件加载图片的方法,发现在chrome浏览器里面出了异常: (failed) ne ...

  7. 在QtCreator 2.1.0 下使用opencv231库加载图片并显示

    在.pro中库连接如上图,具体规则正在学习,注意debug下连接*d.lib.release下链接.lib.没有d的. 如果出现imread不可以加载图片,cvloadImage却可以,则是上面说的连 ...

  8. iOS两种方式加载图片的区别

    加载图片的方式: imageNamed: imageWithContentsOfFile: 加载Assets.xcassets这里面的图片: 1> 打包后变成Assets.car 2> 拿 ...

  9. 利用Volley封装好的图片缓存处理加载图片

    Volley 工具箱中提供了一种通过 DiskBasedCache 类实现的标准缓存.这个类能够缓存文件到磁盘的指定目录.但是为了使用 ImageLoader,我们应该提供一个自定义的内存 LRC b ...

随机推荐

  1. VirtualBox 修改Android x86虚拟机的分辨率

    首先说明一下,本人使用的是Windows下的VirtualBox,android x86使用的是9.0-r2版本 一.查看virtualbox中已有的分辨率 启动虚拟机后,连续按两次E键,进入下面页面 ...

  2. P6106 [Ynoi2010] Self Adjusting Top Tree

    P6106 [Ynoi2010] Self Adjusting Top Tree 题意 给出平面直角坐标系上若干不与坐标轴平行的处于第一象限的互不相交的线段,多次询问平面中一个第一象限的矩形与这些线段 ...

  3. odoo视图 “动作” 里添加菜单按钮：案例

    ####################################################################################odoo中常用方法,在动作里面添 ...

  4. 基于Redisson实现分布式锁源码解读

    文章目录 一.分布式锁的概念 和 使用场景 二.将redis官网对于分布式锁(红锁)的定义和Redisson实现做概括性总结 三.基于Redisson的分布式实现方案 四.加锁过程分析 五.锁重入过程 ...

  5. 如何用C++自己实现mysql数据库的连接池？

    为什么是mysql? 现在几乎所有的后台应用都要用到数据库,什么关系型的.非关系型的:正当关系的,不正当关系的:主流的和非主流的, 大到Oracle,小到sqlite,以及包括现在逐渐流行的基于物联网 ...

  6. list实现从大到小排序

    public static void main(String[] args) { List<Integer> list=new ArrayList<Integer>(); // ...

  7. 一文带你搞定AOP切面

    摘要:AOP在spring中又叫"面向切面编程",是对传统我们面向对象编程的一个补充,主要操作对象就是"切面",可以简单的理解它是贯穿于方法之中,在方法执行前. ...

  8. BurpSuite 2020.5安装教程

    Burpsuite2020.5安装教程 Burpsuite2020.5需要在Java11的环境下才可正常运行. 所以首先安装Java11: 安装Java11 Java SE的安装非常简单,直接下一步, ...

  9. Apache解析漏洞

    多解析特性 在Apache1.x,2.x中Apache 解析文件的规则是从右到左开始判断解析,如果后缀名为不可识别文件解析,就再往左判断.因此对于apache而言,一个test.php.qwea文件依 ...

  10. Golang中如何正确的使用sarama包操作Kafka？

    Golang中如何正确的使用sarama包操作Kafka? 一.背景 在一些业务系统中,模块之间通过引入Kafka解藕,拿IM举例(图来源): 用户A给B发送消息,msg_gateway收到消息后,投 ...