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

    二叉苹果树 1 #include<iostream> 2 #include<cstdio> 3 #include<algorithm> 4 #include< ...

  2. 构建后端第6篇之---java 多态的本质 父类引用 指向子类实现

    张艳涛写于2021-2-20 今天来个破例了,不用英文写了,今天在家里电脑写的工具不行,简单的说 主题是:java多态的原理与实现 结论是:java的多态 Father father= new Son ...

  3. Winform中生成自动控件

    场景: 前几天项目需要模拟数据,但是实际设备还没有接上,就自己用Winform搭建了一个数据模拟器,生成数据给平台.这里又一个需求,就是从数据库中找出设备,然后自动生成控件,勾选就表示开启该设备,能上 ...

  4. 终拿字节Offer...动态规划复盘...

    大家好!我是 Johngo 呀! 和大家一起刷题不快不慢,没想到已经进行到了第二阶段,「动态规划」这部分题目很难,而且很不容易理解,目前我的题目做了一半,凭着之前对于「动态规划」的理解和最近做的题目做 ...

  5. MIPS汇编学习

    MIPS汇编学习 mips汇编不同于x86汇编,属于精简指令集,常见于路由器等一些嵌入式设备中. mips汇编没有对堆栈的直接操作,也就是没有push和pop指令,mips汇编中保留了32个通用寄存器 ...

  6. Kafka原理笔记

    1.什么是kafka? Kafka是一种分布式的,基于发布/订阅的消息系统(消息队列). 2.为什么要用kafka? 当业务逻辑变得复杂,数据量也会越来越多.此时可能需要增加多条数据线,每条数据线将收 ...

  7. 5年Android开发诉苦：47天21家面试，半年空档期觉得整个人生都被毁了

    近日,我在逛某社交论坛时,发现一位做了五年的Android开发将自己这段时间的所有面试经历发表了出来,根据网友自己提供的信息显示,主要面试的地点都在北京,上海等地. 微软和亚马逊刚面试完一面,都是以算 ...

  8. 【动画消消乐｜CSS】083.纯CSS实现卡通齿轮效果

    前言 Hello!小伙伴! 非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出-   自我介绍 ଘ(੭ˊᵕˋ)੭ 昵称:海轰 标签:程序猿|C++选手|学生 简介:因C语言结识编程,随后转入计 ...

  9. Java-Mybatis动态SQL整理

    XML映射器 SQL映射文件的几个顶级元素: cache - 该命名空间的缓存配置 cache-ref - 引用其他命名空间的缓存配置 resultMap - 描述如何从数据库结果集中加载对象 sql ...

  10. Git-08-标签管理

    标签管理 Git的标签虽然是版本库的快照,但其实它就是指向某个commit的指针 跟分支很像对不对?但是分支可以移动,标签不能移动 所以,创建和删除标签都是瞬间完成的 Git有commit,为什么还要 ...