页面中有个板块,需要多张图片加载完之后才能进行显示

            //页面中有个板块 需要多张图片加载完之后才能进行显示
const loadImg = (src) => {
return new Promise( (resolve,reject) =>{
const img = new Image(); img.src = src; img.onload = () => {
resolve(img);
};
//这个是固定的用法,也可以理解为绑定的事件,img.onload表示当图片加载完后执行,img.onerror表示当图片加载失败时运行。
img.onerror = (e) => {
reject(e);
};
});
}; const imgs = [
'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1576028024,2351896536&fm=26&gp=0.jpg',
'http://image.biaobaiju.com/uploads/20190624/14/1561356377-numQVJXlIt.jpeg',
'http://image.biaobaiju.com/uploads/20190624/14/1561356377-qltwxhdeCL.jpeg',
'http://image.biaobaiju.com/uploads/20190624/14/1561356380-mFWDIlTCgn.jpg'
] //map函数处理imgs数组,并返回一个数组,里面是图片对象
const promises = imgs.map((src) => {
return loadImg(src);
}); Promise.all(promises).then((arr) => {
console.log(arr);
arr.forEach((img) => {
document.body.appendChild(img)
});
}).catch((e) => {
console.log(e);
})
 

promise小案例的更多相关文章

  1. Vue.js小案例、生命周期函数及axios的使用

    一.调色框小案例: 随着三个滑动框的变化,颜色框的颜色随之改变 1.1.实例代码 <!DOCTYPE html> <html lang="en" xmlns:v- ...

  2. 机械表小案例之transform的应用

    这个小案例主要是对transform的应用. 时钟的3个表针分别是3个png图片,通过setInterval来让图片转动.时,分,秒的转动角度分别是30,6,6度. 首先,通过new Date函数获取 ...

  3. shell讲解-小案例

    shell讲解-小案例 一.文件拷贝输出检查 下面测试文件拷贝是否正常,如果cp命令并没有拷贝文件myfile到myfile.bak,则打印错误信息.注意错误信息中basename $0打印脚本名.如 ...

  4. [jQuery学习系列六]6-jQuery实际操作小案例

    前言最后在这里po上jQuery的几个小案例. Jquery例子1_占位符使用需求: 点击第一个按钮后 自动去check 后面是否有按钮没有选中, 如有则提示错误消息. <html> &l ...

  5. 02SpringMvc_springmvc快速入门小案例(XML版本)

    这篇文章中,我们要写一个入门案例,去整体了解整个SpringMVC. 先给出整个项目的结构图:

  6. React.js入门小案例

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

  7. SqlDependency缓存数据库表小案例

    SqlDependency的简介: SqlDependency是outputcache网页缓存的一个参数,它的作用是指定缓存失效的数据库依赖项,可以具体到数据库和表. SqlDependency能解决 ...

  8. JavaScript apply函数小案例

    //回调函数1 function callback(a,b,c) { alert(a+b+c); } //回调函数2 function callback2(a,b) { alert(a+b); } / ...

  9. Session小案例------完成用户登录

    Session小案例------完成用户登录     在项目开发中,用户登陆功能再平常只是啦,当用户完毕username和password校验后.进入主界面,须要在主界面中显示用户的信息,此时用ses ...

随机推荐

  1. etcd学习(4)-centos7中部署etcd

    etcd的搭建 前言 单机 集群 创建etcd配置文件 更新etcd系统默认配置 启动 配置ETCD为启动服务 测试下 参考 etcd的搭建 前言 这里记录下如何搭建etcd 单机 在etcd的rel ...

  2. odoo controllers 中type="Json" 或type="http"

    服务端接收参考: # 导包 from odoo import http class HttpRequest(http.Controller): @http.route('/url', type='js ...

  3. Java键盘获取数据

    java录入键盘数据,整型.浮点型.布尔型.字符串. 通过导入java.util.Scanner实现各类操作 import java.util.Scanner;//导入包 public class H ...

  4. 【SpringCloud微服务实战】搭建企业级应用开发框架(一):架构说明

    SpringCloud分布式应用微服务系统架构图: SpringCloud分布式应用微服务系统组件列表: 微服务框架组件:Spring Boot2 + SpringCloud Hoxton.SR8 + ...

  5. vivo 全球商城:优惠券系统架构设计与实践

    一.业务背景 优惠券是电商常见的营销手段,具有灵活的特点,既可以作为促销活动的载体,也是重要的引流入口.优惠券系统是vivo商城营销模块中一个重要组成部分,早在15年vivo商城还是单体应用时,优惠券 ...

  6. Linux 数据库操作(一)

    我们可以将用于数据服务的数据库分为关系型数据库和非关系型数据库,关系型数据库最典型的就是Mysql,以及和他同源的MariaDB数据库,oracle等,非关系型数据库则有redis数据库,mongod ...

  7. LAMP介绍以及Apache安装

    一.LAMP架构介绍 1.1 LAMP概述 LAMP架构是目前成熟的企业网站应用模式之一,指的是协同工作的一整套系统和相关软件,能够提供动态Web站点服务及其应用开发环境.LAMP是一个缩写词,具体包 ...

  8. Flutter学习(8)——CheckBox多选框使用及动态更改多选框数据

    原文地址:Flutter学习(8)--CheckBox多选框使用及动态更改多选框数据 | Stars-One的杂货小窝 最近项目需求需要调整页面,记录一下实现过程 这次主要是要实现个评价页面,选择不同 ...

  9. 《手把手教你》系列技巧篇(十五)-java+ selenium自动化测试-元素定位大法之By xpath中卷(详细教程)

    1.简介 按宏哥计划,本文继续介绍WebDriver关于元素定位大法,这篇介绍定位倒数二个方法:By xpath.xpath 的定位方法, 非常强大.  使用这种方法几乎可以定位到页面上的任意元素. ...

  10. Python从零开始编写控制程序(二)

    # Python从零开始编写控制程序(二)前言:终于考完期末了,鸽了很久的远控Python终于有时间更新下了.上篇文章里,我们解决了注册表写入和Python编写为exe程序的问题.那么这篇文章我们来研 ...