实现一个图片的加载；设置第一张图片加载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. poj1182：食物链

    poj1182:食物链 听说是poj中最经典的一道并查集题目.我一做,果然很经典呢!好难啊!!!真的琢磨了很久还弄懂.这道题的重点就在于怎么用并查集表示题目中的关系环. 1. 题干 原题传送门1 原题 ...

  2. python框架之Flask

    介绍:Flask是一个使用 Python 编写的轻量级 Web 应用框架.其 WSGI 工具箱采用 Werkzeug ,模板引擎则使用 Jinja2 . WSGl:Web Server Gateway ...

  3. Codeforces Round #735 (Div. 2) 题解

    比赛地址:https://codeforces.com/contest/1554. 只有 ABCD 的题解,E 不会. A 答案是 \(\max_i\{a_ia_{i+1}\}\).证明:(反证)如果 ...

  4. edraw mindmaster pro 8.1.0安装破解教程

    Edraw MindMaster Pro 8.1.0是一款思维导图(脑图)设计软件,头脑风暴.思维整理.项目策划.团队协作,多场景提升您的效率,功能齐全,个人觉得比xmind好用上手,文章手把手教你安 ...

  5. vue keep-alive的实现原理和缓存策略

    使用 <!-- 基本 --> <keep-alive> <component :is="view"></component> < ...

  6. Http Request Smuggling - Note

    http请求走私漏洞 访问Burp靶场速度感人..都要哭了(如果没有账户的先创建账户) 基础补充 pipeline http1.1有了Pipeline,就不需要等待Server端的响应了.浏览器默认不 ...

  7. HCNA Routing&Switching之STP选举规则

    前文我们了解了二层环路对网络带来的影响,以及STP工作流程和BPDU数据包结构和相关字段的说明,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/15121317. ...

  8. 线程的常用知识（包括 Thread/Executor/Lock-free/阻塞/并发/锁等）

    本次内容列表: 1.使用线程的经验:设置名称.响应中断.使用ThreadLocal 2.Executor:ExecutorService和Future 3.阻塞队列:put和take.offer和po ...

  9. Docker部署Jenkins 2.285版持续部署集成实践（2）

    前言:上一篇文章中,写到了jenkins搭建,下面记录使用jenkins构建项目实践 1. 以构建.netcore项目为例,如果要构建.netcore项目,需要安装dotnet-sdk包 进入jenk ...

  10. 21JavaScript笔记（1）

    JavaScript 基于对象和事件驱动 简单描述性语言 函数优先 解释型(即时编译型) 具有安全性的脚本语言 1.js组成 核心语法(ECMAScript):开放的.标准的脚本语言规范,主要包含了语 ...