promise小案例
页面中有个板块,需要多张图片加载完之后才能进行显示
//页面中有个板块 需要多张图片加载完之后才能进行显示
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小案例的更多相关文章
- Vue.js小案例、生命周期函数及axios的使用
一.调色框小案例: 随着三个滑动框的变化,颜色框的颜色随之改变 1.1.实例代码 <!DOCTYPE html> <html lang="en" xmlns:v- ...
- 机械表小案例之transform的应用
这个小案例主要是对transform的应用. 时钟的3个表针分别是3个png图片,通过setInterval来让图片转动.时,分,秒的转动角度分别是30,6,6度. 首先,通过new Date函数获取 ...
- shell讲解-小案例
shell讲解-小案例 一.文件拷贝输出检查 下面测试文件拷贝是否正常,如果cp命令并没有拷贝文件myfile到myfile.bak,则打印错误信息.注意错误信息中basename $0打印脚本名.如 ...
- [jQuery学习系列六]6-jQuery实际操作小案例
前言最后在这里po上jQuery的几个小案例. Jquery例子1_占位符使用需求: 点击第一个按钮后 自动去check 后面是否有按钮没有选中, 如有则提示错误消息. <html> &l ...
- 02SpringMvc_springmvc快速入门小案例(XML版本)
这篇文章中,我们要写一个入门案例,去整体了解整个SpringMVC. 先给出整个项目的结构图:
- React.js入门小案例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...
- SqlDependency缓存数据库表小案例
SqlDependency的简介: SqlDependency是outputcache网页缓存的一个参数,它的作用是指定缓存失效的数据库依赖项,可以具体到数据库和表. SqlDependency能解决 ...
- JavaScript apply函数小案例
//回调函数1 function callback(a,b,c) { alert(a+b+c); } //回调函数2 function callback2(a,b) { alert(a+b); } / ...
- Session小案例------完成用户登录
Session小案例------完成用户登录 在项目开发中,用户登陆功能再平常只是啦,当用户完毕username和password校验后.进入主界面,须要在主界面中显示用户的信息,此时用ses ...
随机推荐
- 【Mysql】InnoDB 中的聚簇索引、二级索引、联合索引
接上一篇内容. 一.聚簇索引 其实之前内容中介绍的 B+ 树就是聚簇索引. 这种索引不需要我们显示地使用 INDEX 语句去创建,InnoDB 引擎会自动创建.另外,在 InnoDB 引擎中,聚簇索引 ...
- 【LeetCode】404. 左叶子之和
404. 左叶子之和 知识点:二叉树 题目描述 计算给定二叉树的所有左叶子之和.. 示例 3 / \ 9 20 / \ 15 7 在这个二叉树中,有两个左叶子,分别是 9 和 15,所以返回 24 解 ...
- 一台电脑安装两个不同版本的MySQL
背景: 本人电脑上已有mysql-8.0.12-winx64,并且可以使用.但由于工作需要,得使用mysql-5.5.59-winx64,已有mysql-5.5.59-winx64的解压好的安装包 参 ...
- redis故障时的一些概念
1.缓存穿透 概念访问一个不存在的key,缓存不起作用,请求会穿透到DB,流量大时DB会挂掉. 解决方案采用布隆过滤器,使用一个足够大的bitmap,用于存储可能访问的key,不存在的key直接被过滤 ...
- 使用C#winform编写渗透测试工具--端口扫描
使用C#winform编写渗透测试工具--端口扫描器 主要介绍使用C#winform编写渗透测试工具--端口扫描器,端口扫描器则是一种检测服务器或者主机虚拟端口是开启或关闭的工具.由于连接到局域网或互 ...
- Discuz 7.x/6.x 全局变量防御绕过导致代码执行
地址 http://192.168.49.2:8080/viewthread.php?tid=13&extra=page%3D1 安装成功后,找一个已存在的帖子,向其发送数据包,并在Cooki ...
- anyRTC Web SDK 实现音视频呼叫功能
前言 大家好,今天小编带给大家一个基于 anyRTC Web SDK 实现音视频呼叫的功能(本项目采用vue开发). 前提条件 在开始写代码之前还需要做一些准备工作,如果你之前没有使用过 anyRTC ...
- 无法解析插件 org.apache.maven.plugins:maven-clean-plugin:2.5
在Idea创建项目中,出现7出错误,告诉我 无法解析插件 org.apache.maven.plugins:maven-clean-plugin:2.5 但是在maven设置中都一致 后来加了几个镜像 ...
- 自学linux——6.安全外壳协议(ssh服务)
ssh服务 ssh(secure shell)安全外壳协议:远程连接协议,远程文件传输协议 1.协议使用端口号默认:22 若要修改,则修改ssh服务的配置文件/etc/ssh/ssh_config a ...
- Python从零开始编写控制程序(二)
# Python从零开始编写控制程序(二)前言:终于考完期末了,鸽了很久的远控Python终于有时间更新下了.上篇文章里,我们解决了注册表写入和Python编写为exe程序的问题.那么这篇文章我们来研 ...