实现一个图片的加载；设置第一张图片加载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. ZYNQ FLASH+EMMC手动移植LINUX启动

    前言 虽可使用Petalinux进行移植,简单方便,但为了更清楚明白的了解整个流程,还是尝试了一波手动移植. 参考资料 ZYNQ Linux 移植:包含petalinux移植和手动移植debian9 ...

  2. mysql 版本在springboot 中定义位置

  3. ifix vba 读取计算机中的txt文件，截取字符串显示

    利用vba脚本,使用Scripting.FileSystemObject对象可以实现对文本文件的操作,下面以一个朋友的实际例子为例将截获的字符串进行页面显示. Private Sub CommandB ...

  4. 【Azure 应用服务】App Service 运行状况健康检查功能简介 (Health check)

    通过Azure App Service门户,启用Health Check来监视应用服务的实例,当发现其中一个实例处于不健康(unhealthy)状态时,通过重新路由(即把有问题的实例从负载均衡器中移除 ...

  5. 自学linux——19.TFTP服务器的搭建

    TFTP服务器的搭建 1.TFTP的认识 TFTP(Trivial File Transfer Protocol)简单文件传输协议,是一种基于UDP协议在客户端和服务器之间进行简单文件传输的协议,不需 ...

  6. firewalld防火墙基础

    目录 一.firewalld 概述 二.firewalld与iptables 的区别 三.firewalld 区域概念 四.Firewalld数据处理流程 五.Firewalld检查数据包的源地址的规 ...

  7. Java基础（一）：I/O多路复用模型及Linux中的应用

    IO多路复用模型广泛的应用于各种高并发的中间件中,那么区别于其他模式他的优势是什么.其核心设计思想又是什么.其在Linux中是如何实现的? I/O模型 I/O模型主要有以下五种: 同步阻塞I/O:I/ ...

  8. Java流程控制05——循环结构

    循环结构 while 循环  while(布尔表达式){   //循环语句 } 只要布尔表达式为true,循环就会一直执行下去. 我们为你大多数情况是会让循环停止下来的,我们需要让一个表达式时效的方式 ...

  9. XCTF-ics-05(文件包含+preg_replace函数/e修正符下的代码执行漏洞)

    记一道preg_replace函数/e模式下的代码执行漏洞利用的题. 只有设备维护中心页面可以进入,页面没有什么可点击的,查看源代码,发现这里有个参数. 拼接到url,页面显示index,拼接/etc ...

  10. Java线程基础及多线程的实现

    一.进程和线程 1.进程:正在运行的程序         是系统进行资源分配和调用的独立单位         每一个进程都有它自己的内存空间和系统资源 2.线程是进程中的单个顺序控制流,是一条执行路径 ...