JavaScript判断图片是否加载完成的三种方式
2024-10-15 17:34:22
JavaScript判断图片是否加载完成的三种方式
有时需要获取图片的尺寸，这需要在图片加载完成以后才可以。有三种方式实现，下面一一介绍。
一、load事件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<!DOCTYPE HTML><html><head> <meta charset="utf-8"> <title>img - load event</title></head><body> <p id="p1">loading...</p> <script type="text/javascript"> img1.onload = function() { p1.innerHTML = 'loaded' } </script></body></html> |
测试，所有浏览器都显示出了“loaded”，说明所有浏览器都支持img的load事件。
二、readystatechange事件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<!DOCTYPE HTML><html><head> <meta charset="utf-8"> <title>img - readystatechange event</title></head><body> <p id="p1">loading...</p> <script type="text/javascript"> img1.onreadystatechange = function() { if(img1.readyState=="complete"||img1.readyState=="loaded"){ p1.innerHTML = 'readystatechange:loaded' } } </script></body></html> |
readyState为complete和loaded则表明图片已经加载完毕。测试IE6-IE10支持该事件，其它浏览器不支持。
三、img的complete属性
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<!DOCTYPE HTML><html><head> <meta charset="utf-8"> <title>img - complete attribute</title></head><body> <p id="p1">loading...</p> <script type="text/javascript"> function imgLoad(img, callback) { var timer = setInterval(function() { if (img.complete) { callback(img) clearInterval(timer) } }, 50) } imgLoad(img1, function() { p1.innerHTML('加载完毕') }) </script></body></html> |
轮询不断监测img的complete属性，如果为true则表明图片已经加载完毕，停止轮询。该属性所有浏览器都支持。
最新文章
- UOJ59 WC2013 小Q运动季
- OPENVPN+MYSQL认证+客户端配置
- 自动化运维，远程交互从服务器A上ssh到服务器B上，然后执行服务器B上的命令。
- NPOI导出EXCEL 打印设置分页及打印标题
- HTML-学习笔记（样式）
- C# Chrome内核
- 【BZOJ-1597】土地购买 DP + 斜率优化
- 点击空白处隐藏div-阻止事件冒泡
- apache commons-email1.3使用
- PHP实现插入排序算法
- Visual Studio 2010/2013 UTF8编码调试时显示中文
- ASP.NET MVC 创建控制器类过程
- 矢量图形（vector graphics）和位图图像（bitmap）以及分辨率概念
- 暗影精灵2pro——使用一年多后电池鼓包，传说中的更新BIOS问题（惠普15ax-226tx）
- 程序猿（媛）的葵花宝典-- 必备idea 插件plugins 提高编码效率
- vue对比其他框架详细介绍
- EF CodeFirst 数据库的操作
- [转]VirtualBox中的网络连接方式详解
- 一款不错的网站压力测试工具webbench
- 在ubuntu下 使用Jetty 和 Maven 开发 HelloWorld