1. var url='jsonp-master/0.jpg'
  2. var url1='jsonp-master/1.jpg'
  3. var url2='jsonp-master/2.jpg'
  4. var img=document.createElement('img');
  5. var img1=document.createElement('img');
  6. var img2=document.createElement('img');
  7. img.src=url;
  8. img1.src=url1;
  9. img2.src=url2;
  10.  
  11. function loading(img){
  12. return new Promise(function(resolve,reject){
  13. img.onload=function(){
  14. resolve(img)
  15. }
  16. })
  17. }
  18. //图片预加载 等所有图片都加载完毕后统一显示
  19. Promise.all([
  20. loading(img),loading(img1),loading(img2)
  21. ]).then(function(res){
  22. for(var i=0;i<res.length;i++){
  23. document.body.appendChild(res[i])
  24. }
  25. })
  26. //谁加载的快就显示谁
  27. Promise.race([
  28. loading(img),loading(img1),loading(img2)
  29. ]).then(function(res){
  30. document.body.appendChild(res)
  31. })

  

用promise做图片的预加载的更多相关文章

  1. Promise实现多图预加载

    Promise正如它的中文意思“承诺”一样,保存着未来会发生事件(一般为异步操作).Promise避免了“回调地狱”,写法更加接近同步操作.说到同步,我更加喜欢async.await,它们书写更贴近同 ...

  2. JS 实现图片的预加载(转载)

    图片预加载是web开发中一种应用相当广泛的技术,比如我们在做图片翻转显示等特效的时候,为了让图片在转换的时候不出现等待,我们最好是先让图片下载到本地,然后在继续执行后续的操作. 下面的函数实现了一个我 ...

  3. [转]Javascript实现图片的预加载详解

    下面的函数实现了一个我们想要的最基本的图片预加载效果 function preloadimages(arr){ var newimages=[] var arr=(typeof arr!=" ...

  4. Javascript实现图片的预加载的完整实现

    图片预加载是web开发中一种应用相当广泛的技术,比如我们在做图片翻转显示等特效的时候,为了让图片在转换的时候不出现等待,我们最好是先让图片下载到本地,然后在继续执行后续的操作.今天我们将来实现一个完整 ...

  5. ViewPager做图片浏览器,加载大量图片OOM的问题修正

    /** * @author CHQ * @version 1.0 * @date 创建时间: 2016/7/26 17:18 * @parameter * @return * 图片查看器 * //可以 ...

  6. Jquery实现图片的预加载与延时加载

    有很多项目经常会需要判断图片加载完成后执行相应的操作,或者需要图片延迟加载,网上虽然已经有很不错的插件,但要为这些效果还得单独加载一个插件的话总感觉有点不舒服,干脆自己写了个方法: 1 2 3 4 5 ...

  7. flex 实现图片播放 方案一 图片全部预加载放内存

    这种方案,对于web的应用有局限性,在图片量比较多,比较大的时候,就会爆浏览器异常.一般建议轻量级的采用这种方案. <?xml version="1.0" encoding= ...

  8. ajax点击加载更多数据图片(预加载)

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. Javascript图片预加载详解

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

随机推荐

  1. Java 练习:字符串反转

    package com.swift; public class String_Reverse_Test { public static void main(String[] args) { /* * ...

  2. Eclipse+Tomcat搭建jsp服务器

    首先,安装java sdk 环境,这里就不多说了,附上java sdk的下载地址:http://www.oracle.com/technetwork/java/javase/downloads/jdk ...

  3. 关于UINavigationController的一些技巧

    未自定义任何东西的导航条效果如下: 1.自定义了 leftBarButtonItem 之后,左滑返回手势失效了,解决办法: self.navigationController.interactiveP ...

  4. 04Windows中的字符类型

    1. Windows 中常用的数据类型定义 //WinNt.h中定义 typedef unsigned short wchar_t; //A 16-bit character typedef char ...

  5. 08GNU as汇编

    1. 概述 ​ 由于操作系统许多关键代码要求有很高的执行速度和效率,因此在一个操作系统源代码中通常就会包含大约 10% 左右的起关键作用的汇编语言程序量.Linux 操作系统也不例外,它的 32 位初 ...

  6. linux 上安装配置l2tp的客户端

    有些时候我们外网linux服务器需要访问内网的服务器,这时候就需要在外网服务器上配置l2tp的客户端,连接到VPN访问内网服务器. 安装: yum -y install xl2tpd ppp 安装成功 ...

  7. 剑指Offer(书):顺时针打印数组

    题目:输入一个矩阵,按照从外向里以顺时针的顺序依次打印出每一个数字,例如,如果输入如下4 X 4矩阵: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 则依次打印出数字1 ...

  8. JDK1.8 HashMap$TreeNode.balanceInsertion 红黑树平衡插入

    红黑树介绍 1.节点是红色或黑色. 2.根节点是黑色. 3.每个叶子节点都是黑色的空节点(NIL节点). 4 每个红色节点的两个子节点都是黑色.(从每个叶子到根的所有路径上不能有两个连续的红色节点) ...

  9. debiand上安装thunderbird

    deb包下载地址 http://sourceforge.net/projects/ubuntuzilla/files/mozilla/apt/pool/main/t/thunderbird-mozil ...

  10. Java技术——Java反射机制分析

    )生成动态代理. 2. Java反射API 反射API用来生成在当前Java虚拟机中的类.接口或者对象的信息. Class类:反射的核心类,可以获取类的属性,方法等内容信息. Field类:Java. ...