实现一个图片的加载；设置第一张图片加载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. Spring，Spring-boot（一）

    前言 Spring作为java开源世界第一开源框架,已经成为事实上的Java EE开发标准. 最根本的使命就是简化Java开发. 不重复制造车轮 Don't reinvent the wheel .从 ...

  2. 开发工具IDE从入门到爱不释手（二）开发中必会技能

    一.高效的代码编辑技能 1.复制和复制历史 Ctrl+C:复制,点中你要复制的行,,完成复制 Ctrl+Shift+V:复制历史, 查看最近复制的五条历史记录 Ctrl+D:直接复制出光标所在行 Al ...

  3. jvm源码解读--08 创建oop对象,将static静态变量放置在oop的96 offset处

    之前分析的已经加载的.Class文件中都没有Static 静态变量,所以也就没这部分的解析,自己也是不懂hotspot 将静态变量放哪里去了,追踪源码之后,看清楚了整个套路,总体上来说,可以举例来说对 ...

  4. Tom_No_01 IDEA tomcat 源码环境搭建

    1.下载源码 apache-tomcat-8.5.50-src 2.下载源码 放D盘,解压后根目录新建pom.xml和catalina-home pom.xml文件中内容为 <?xml vers ...

  5. 大数据学习（08）—— Hive简介

    前面的Hadoop学习是非常体系化的,有主线有细节.到了Hive这里,知识点非常零散,感觉没有什么主线能把它串起来.从官方网站上就能看出这点差异. 什么是Hive Hive是一个基于Hadoop的企业 ...

  6. 阿里面试官：Android中binder机制的实现原理及过程？

    Binder 是 Android 系统中非常重要的组成部分.Android 系统中的许多功能建立在 Binder 机制之上.在这篇文章中,我们会对 Android 中的 Binder 在系统架构中的作 ...

  7. 【笔记】KNN之分类准确度

    分类准确度 分类准确度 以sklearn中的手写数字datasets.load_digits为例,其是8*8的图形,具有64个特征值,类别由0到9 我们挑选出666这个图形,将其可视化 X = dig ...

  8. 结合场景使用Redis缓存与数据库同步

    Redis缓存与MySQL数据库与同步 什么场景用到了Redis缓存? 1.广告数据 2.搜索时,分类品牌名称,分类名称和规格数据 3.购物车 4.支付 问题:如何实现? 1.广告数据 先查询Redi ...

  9. 「移动端」Web页面适配

    一.什么是移动端适配 移动端 Web 页面,就是常说的手机 h5页面.webview页面.公众号开发的网页等. 由于手机机型较多,各个手机的屏幕尺寸不一样,所以做移动端页面,需要考虑在安卓和ios的各 ...

  10. SQL 练习18

    按各科成绩进行排序,并显示排名, Score 重复时保留名次空缺 SELECT t.cid,t.sid,t.score ,COUNT(t1.score)+1 as 排名 from sc as t LE ...