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

            //页面中有个板块 需要多张图片加载完之后才能进行显示
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. 性能测试之查看cpu命令

    top -m 用户空间进程(us). 内核空间进程(sy). 高nice值的用户空间进程(ni). 空闲(id). 空闲等待io(wa). 中断上半部(hi). 中断下半部(si). 以及steal时 ...

  2. Orchestrator+Proxysql 实现自动导换+应用透明读写分离

    前面一篇博客我介绍了如何通过Orachestrator+脚本实现自动导换. 这一章,我来演示一下如何通过Orchestrator+Proxysql 实现自动导换+应用透明读写分离 总体架构 可选架构1 ...

  3. Kubernetes全栈架构师(资源调度上)--学习笔记

    目录 Replication Controller和ReplicaSet 无状态服务Deployment概念 Deployment的创建 Deployment的更新 Deployment的回滚 Dep ...

  4. loadrunner 利用JDBC操作mysql数据库

    import lrapi.lr;import java.util.ArrayList;import java.util.List; import java.sql.Connection; import ...

  5. anyRTC视频连麦demo上线啦!

    音频连麦demo一经问世就得到开发者的一致好评,有很多开发者咨询视频连麦的demo该怎么去实现,本着让"视频交付更简单"的理念,我们推出了视频连麦demo! 音视频技术不仅局限用于 ...

  6. Vue学习笔记(一)简单使用和插值操作

    目录 一.Vue是什么 二.Vue简单体验 1. 声明式渲染 2. vue列表展示 3. 处理用户输入(事件监听) 三.插值操作 1. Mustache语法 2. 常用v-指令 v-once v-ht ...

  7. 造轮子系列之RPC 1:如何从零开始开发RPC框架

    前言 RPC 框架是后端攻城狮永远都绕不开的知识点,目前业界比较知名有 Dubbo.Spring Cloud 等.很多人都停留在了只会用的阶段,作为程序猿,拥有好奇心深入学习,才能有效提高自己的竞争力 ...

  8. 使用 GLFW 在 OpenGL 的场景中漫游

    前言 前面已经建立了 OpenGL 框架,加载了 3D 模型,但是还没有在场景中漫游的功能.为了展示 3D 模型,我只是简单地利用变换视图矩阵的方式使模型在视野中旋转.同时,之前的程序连最简单的改变窗 ...

  9. Java数组06——冒泡排序

    冒泡排序 例子:  package array; ​ import java.util.Arrays; ​ public class ArrayDemon08 {     public static ...

  10. MySQL 创建高性能索引

    索引是存储引擎用于快速找到记录的一种数据结构.除了加速查找,索引在其他方面也有一些有用的属性.索引对于良好的性能非常关键.尤其是当表中的数据量越来越大时,索引对性能的影响愈发重要.在数据量较小且负载较 ...