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

            //页面中有个板块 需要多张图片加载完之后才能进行显示
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. Laravel使用artisan快速实现表单的登陆注册

    1. 开发环境 macOS Mojave 10.14.6 XAMPP 5.6.38 Laravel 5.2 2. 在终端,先进入到项目根目录并执行执行命令 php artisan make:auth ...

  2. POJ3662

    poj3662 大意:n个点p条边的无向图,求在删去k条边后使1和n号点联通路径上的最长边最小值. 一开始理解错题意以为是分层图求最短路径,结果写完发现k太大了发现事情没有那么简单(讨厌英语题面!) ...

  3. element UI rules prop对应关系

  4. 谈谈 C++ STL 中的迭代器

    C++中的迭代器和指针 在前面的内容中我们简单讲过,STL主要是由三部分组成 容器(container),包括vector,list,set,map等 泛型算法(generic algorithm), ...

  5. QT常用控件(一)——菜单栏和对话框

    引言 QMainWindow 是一个为用户提供主窗口程序的类,包含一个菜单栏(menu bar).多个工具栏(tool bars).多个锚接部件(dock widgets).一个状态栏(status ...

  6. Flutter集成高德定位和地图功能

    定位集成 配置高德定位依赖库 新建 Flutter 项目,使用 Android Studio 打开项目里的 android 工程,或者右键 android 目录-> flutter -> ...

  7. java使用Selenium操作谷歌浏览器学习笔记(一)

    下载安装 在淘宝镜像https://npm.taobao.org/mirrors/chromedriver/中下载与浏览器对应的版本 查看浏览器版本 点击查看谷歌浏览器版本 在IDEA项目中导入相关j ...

  8. 你的ES数据备份了吗?

    前言: 无论使用哪种存储软件,定期的备份数据都是重中之重,在使用ElasticSearch的时候,随着数据日益积累,存放es数据的磁盘空间也捉襟见肘, 此时对于业务功能使用不到的索引数据,又不能直接删 ...

  9. 作为有经验的程序员如果不懂Lambda表达式就说不过去了吧,建议收藏!!!

      最近刚好有空给大家整理下JDK8的特性,这个在实际开发中的作用也是越来越重了,本文重点讲解下Lambda表达式 Lambda表达式   Lambda 表达式,也可称为闭包,它是推动 Java 8 ...

  10. 且看一文梳理VS2019中dll的创建使用

    动态链接库(dll) Windows下有静态链接(lib)库和动态链接库(dll)两种共享代码的方式. 本文将介绍dll的应用场景,以及在vs2019平台下的生成和使用. 今天的笔记内容说的是平时经常 ...