我们在写 jquery 的时候一般都会写 $(document).ready,加载完成事件还有一个就是 onload

onload 与 ready 的区别是:

1、ready 是 DOM 加载完成的事件

2、onload 是所有内容加载完成(如:图片)

我们如果要判断某一块 div 中的内容是否完全加载完成可以通过 onload 事件。

同理,判断图片是否加载完成可以在 img 元素上绑定 onload 事件:

<img id="img">

  

document.querySelector('#img').onload = function() {}

  

如果需要判断多张图片,可以借助 Promise

let images = [
'1.jpg',
'2.jpg'
];
let promiseAll = [], imgs = [], total = images.length;
for (let i = 0; i < total; i++) {
promiseAll[i] = new Promise((resolve, reject) => {
imgs[i] = new Image();
imgs[i].src = images[i];
imgs[i].onload = function() {
resolve(imgs[i]);
};
})
}
Promise.all(promiseAll).then(img => {
// 全部图片加载完成
})

  

js 判断图片是否加载完成(使用 onload 事件)的更多相关文章

  1. JS判断图片是否加载完成三种方式

    1.img的complete属性 轮询不断监测img的complete属性,如果为true则表明图片已经加载完毕,停止轮询.该属性所有浏览器都支持. <p id="p1"&g ...

  2. js判断图片是否加载完毕

    附件: https://www.jb51.net/article/102385.htm 问题:  .offset().top和$(window).scrollTop()每次刷新页面后滚动的值有时候会不 ...

  3. js判断图片是否加载完成

    var img = new Image(); //新建一个图片对象:img.src = ...; //图片地址是你准备要加载的地址:if(img.complete){ //表示图片已经加载完成}

  4. js判断图片是否加载成功

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 关于JS判断图片是否加载完成且获取图片宽度的方法

    做web的同学们经常会碰到客户上传图片将网页内容区撑破了的情况,下面就这个问题我们一种如何使用js处理这个问题的方法,具体思路就是在js判断客户端的图片下载完毕之后适时的对该图片的宽度或者高度做一些处 ...

  6. js 判断图片是否加载完成

    1.根据url来加载图片: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 /**  * 加载图片,直到加载完成后才调用回调函数  * @param url 后面读取图片流的u ...

  7. JS判断图片是否加载完成 背景图404 快到碗里来

    面对这个问题 我最多做到表面笑嘻嘻 …… 真不知道测试怎么那么…… 啥都能给你测出来 有的没的都能给你测出来 算了算了  谁让本仙女本精灵本可爱温柔大方善解人意呢 …呵呵呵 ————————————正 ...

  8. JS实现图片预加载无需等待

    网站开发时经常需要在某个页面需要实现对大量图片的浏览;用javascript来实现一个图片浏览器,让用户无需等待过长的时间就能看到其他图片 网站开发时经常需要在某个页面需要实现对大量图片的浏览,如果考 ...

  9. 【转】JS判断SWF,JPG加载完毕、兼容(Activex,plugIn)所有浏览器

    JS判断SWF,JPG加载完毕.兼容(Activex,plugIn)所有浏览器 这里主要说下监听SWF的加载. 网上流传已久的监听方法,只能在IE(Activex插件下)下实现.在使用plugin的浏 ...

随机推荐

  1. eclipse提示找不到dubbo.xsb报错

    需要下载一个dubbo.xsb文件到本地,并在eclipse中配置 下载路径:下载链接 下载方法: a).带开链接 b).点击[Raw]按钮 c). 右键->另存为 在eclipse中配置xsb ...

  2. 【Pthon入门学习】多级菜单小例子

    menu_list = { '北京':{ '昌平':{ '回龙观':{ '和谐家园':{}, '矩阵小区':{}, '北店家园':{} }, '沙河':{ '北街家园1区':{}, '北街家园2区': ...

  3. Spark SQL、DataFrame和Dataset——转载

    转载自:  Spark SQL.DataFrame和Datase

  4. javascript event对象操作

    js代码: $(".leads_detail").click(function(e){ e = e || event; var t = e.target || e.srcEleme ...

  5. PSP1130

    PSP时间图: 类型 任务 开始时间 结束时间 净时间 中断时间 日期 开会 开会 16:17 16:50 33 0 20171027 开会 开会 17:00 17:22 22 0 20171028 ...

  6. openssl 基本加密

    openssl命令行工具详解(openssl的命令众多,请酌情处理与记忆) 在命令行输入:openssl asdf,可以显示openssl的命令说明   1:Standard commands(标准命 ...

  7. vsftpd 安全性能工具

    vsftpd实战(服务端192.168.23.12,客户端192.168.23.11) 1:安装vsftpdyum install -y vsftpd 2:客户端安装lftpyum install - ...

  8. JS扫雷原理性代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 第179天:javascript中replace使用总结

    ECMAScript提供了replace()方法.这个方法接收两个参数,第一个参数可以是一个RegExp对象或者一个字符串,第二个参数可以是一个字符串或者一个函数.现在我们来详细讲解可能出现的几种情况 ...

  10. Vue 定时执行函数

    var app = new Vue({ el: '#app', data: { count: , }, filters: { }, mounted: function () { this.$nextT ...