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

            //页面中有个板块 需要多张图片加载完之后才能进行显示
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. 第十二篇 -- 如何向MFC对话框添加菜单

    1.如何在基于对话框的MFC中添加菜单:https://blog.csdn.net/u012273127/article/details/71293088 步骤: 资源文件处右击Add Resourc ...

  2. Python将字符串转化为对应类名的两种方法

    way first: 1 from django.utils.module_loading import import_string 2 ValidationError = import_string ...

  3. 构建后端第2篇之---springb @ComponentScan注解使用

    张艳涛写于2021-2-8日 构建后端项目的时候遇到一个问题,在zyt-auth项目的依赖定义了@Component类,这个类在项目启动的时候提示没有找到bean Field tokenService ...

  4. OOP-Klass模型 简略

    class Model { public static int a = 1; public int b; public Model(int b) { this.b = b; } } public st ...

  5. noip模拟29[简单的板子题](虽然我不会)

    \(noip模拟29\;solutions\) 这次考试给我最大的伤害,让我意识到了差距 这场考试可以说是非常的简单,就是简单到,看两眼,打个表就有结果了 但是呢?我考得非常的完蛋,只有30pts 据 ...

  6. 常用的Windows快捷键

    常用的Windows快捷键 关闭触摸板(华硕电脑):Fn+F9 切换窗口:Alt + Tab任务视图:Win + Tab松开键盘界面不会消失 创建新的虚拟桌面:Win + Ctrl + D(新开一个干 ...

  7. 一个遵循CleanArchitecture原则的Asp.net core轻量级开源项目

    这是一个基于最新的ASP.net core 5.0创建Razor Page应用程序解决方案模板.遵循Clean Architecture的原则,以最求简洁的代码风格和实现快速开发小型的web业务系统的 ...

  8. 了解cookie和storage的区别及优缺点

    共同点:用于数据的存储. 区别: 1.是否需要添加到http请求头? HTTP Cookie(cookie):在客户端存储会话信息,要求服务器对任意HTTP请求发送set-cookie HTTP头作为 ...

  9. 一次BC站点渗透实录

    初探 打开首页 简单信息收集: IP地址:美国加利福尼亚洛杉矶 无CDN 中间件:Nginx 80端口直接突破,故未进行端口扫描 渗透思路 一般这种BC站点,有几种思路可以切入: 1)通过SQL注入查 ...

  10. Windows常用命令汇总以及基础知识

    命令部分: dir dir指定要列出的驱动器.目录和/或文件 ,/?显示所有命令 例:dir /b /s /o:n /a:a 表示显示当前路径下的所有文件的绝对路径,包含子文件夹的内容 /b表示去除摘 ...