我们在写 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. 会声会影2018提示dll文件丢失怎么办?

    一些会声会影2018用户,在安装.使用软件的过程中,会出现dll缺失的提示,导致软件无法打开,那么,出现这一问题要怎么解决.接下来小编为大家具体介绍下两种解决方法. 图1:dll丢失提示 打开会声会影 ...

  2. 常用DOS指令备忘

    1.删除整个目录,包括空目录 rd D:\管理\2012新同学练习\.svn /s/q /s 删除当前目录及子目录 /q 不询问直接删除 2.拷贝目录树 xcopy D:\管理\2012新同学练习 E ...

  3. centos 系统初始化

    centos 系统初始化 #!/bin/bash # author cfwl create date of 2012-10-21 # blog http://cfwlxf.blog.51cto.com ...

  4. 如何报FOB价格

    FOB价格是当货物越过船舷,卖方即完成交货.FOB价格术语仅适用于海运或内河运输.在国际贸易中,FOB价格是比较常用的一种,FOB价格作为众多贸易中的一种需要外贸人员熟悉掌握. FOB价格是当货物越过 ...

  5. 未能加载文件或程序集 system.Web.Http.WebHost解决办法。

    在csdn中找到一个方法: Update-Package Microsoft.AspNet.WebApi -reinstall 然后就好了. 另外一个方法是缺少哪个dll,就复制一个dll放到bin文 ...

  6. 小白用Android MVP-初体验(一)

    写android以来,一直都是采用MVC的模式,所有的业务逻辑,网络请求等都放在了View中,即Activity或者Fragment中.看了一些mvp文章,很多跨度较大,也因为自己造诣不够,还不能跟上 ...

  7. 一次WebSphere性能问题诊断过程

    一次接到用户电话,说某个应用在并发量稍大的情况下就会出现响应时间陡然增大,同时管理控制台的响应时间也很慢,几乎无法进行正常工作. 赶到现场后,查看平台版本为Webshpere6.0.2.29,操作系统 ...

  8. get_list_by_where

    /** * 查询数据 * @param $param * @param bool $get_rows 或者总数 * @param bool $get_one 或者一条记录 * @param bool ...

  9. JAVA字节流(读写文件)

    InputStream此抽象类是表示字节输入流的所有类的超类.需要定义 InputStream 的子类的应用程序必须始终提供返回下一个输入字节的方法. int available()返回此输入流方法的 ...

  10. CCSDS标准的LDPC编译码仿真

    html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...