var url='jsonp-master/0.jpg'
var url1='jsonp-master/1.jpg'
var url2='jsonp-master/2.jpg'
var img=document.createElement('img');
var img1=document.createElement('img');
var img2=document.createElement('img');
img.src=url;
img1.src=url1;
img2.src=url2; function loading(img){
return new Promise(function(resolve,reject){
img.onload=function(){
resolve(img)
}
})
}
//图片预加载 等所有图片都加载完毕后统一显示
Promise.all([
loading(img),loading(img1),loading(img2)
]).then(function(res){
for(var i=0;i<res.length;i++){
document.body.appendChild(res[i])
}
})
//谁加载的快就显示谁
Promise.race([
loading(img),loading(img1),loading(img2)
]).then(function(res){
document.body.appendChild(res)
})

  

用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. c内置数据类型

    参考 C与指针 第三章 类型 类型标识符 字节 表示数值范围 备注 整型 [signed] int 2* -32768~32767 -2^15 ~ (2^15 -1) 无符号整型 unsigned [ ...

  2. 【two pointers 细节题】cf1041dD. Glider

    像这样细节老是打挂不行啊…… A plane is flying at a constant height of hh meters above the ground surface. Let's c ...

  3. 【AC自动机】bzoj3172: [Tjoi2013]单词

    fail图上后缀和需要注意一下 Description 某人读论文,一篇论文是由许多单词组成.但他发现一个单词会在论文中出现很多次,现在想知道每个单词分别在论文中出现多少次. Input 第一个一个整 ...

  4. H5(一)H5与HTML、XHTML的不同

    一.基本概念 html:超文本标记语言 (Hyper Text Markup Language) xhtml:可扩展超文本标记语言,是一种置标语言,表现方式与超文本标记语言(HTML)类似,不过语法上 ...

  5. MySQL_8.0.15_Windows10_X64 安装教程

    最近学习的内容涉及到MySQL的知识,所以安装一个MySQL非常有必要,参考别人的教程安装过程还算顺利,其中遇到了一些问题查了一些也解决了,这里把整个安装过程梳理一遍,给大家一个参考. 我手里的电脑是 ...

  6. 基于网站地址URL传输session信息

    在php的学习中,会话是我们常常用到的,那今天我们就来详细讲讲会话中的session: 一.session的工作机制:当开启session后,服务器会在服务器中保存session文件,然后再浏览器保存 ...

  7. Python 建模步骤

    #%% #载入数据 .查看相关信息 import pandas as pd import numpy as np from sklearn.preprocessing import LabelEnco ...

  8. STM32三种启动模式 boot0 boot1

    STM32三种启动模式对应的存储介质均是芯片内置的,它们是: 1)用户闪存=芯片内置的Flash.2)SRAM=芯片内置的RAM区,就是内存啦.3)系统存储器=芯片内部一块特定的区域,芯片出厂时在这个 ...

  9. MySQL配置允许远程登录

    MySQL默认只允许用户本地登录,需要远程连接可进行如下操作: 允许root用户在任何地方进行远程登录,并具有所有库任何操作权限: 使用root用户登录mysql: mysql -u root -p& ...

  10. PAT Basic 1081

    1081 检查密码 本题要求你帮助某网站的用户注册模块写一个密码合法性检查的小功能.该网站要求用户设置的密码必须由不少于6个字符组成,并且只能有英文字母.数字和小数点 .,还必须既有字母也有数字. 输 ...