使用JavaScript判断图片是否加载完成的三种实现方式


Posted in Javascript onMay 04, 2014

有时需要获取图片的尺寸,这需要在图片加载完成以后才可以。有三种方式实现,下面一一介绍。

一、load事件

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>img - load event</title> 
</head> 
<body> 
<img id="img1" src="http://pic1.win4000.com/wallpaper/f/51c3bb99a21ea.jpg"> 
<p id="p1">loading...</p> 
<script type="text/javascript"> 
img1.onload = function() { 
p1.innerHTML = 'loaded' 
} 
</script> 
</body> 
</html>

测试,所有浏览器都显示出了“loaded”,说明所有浏览器都支持img的load事件。

二、readystatechange事件

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>img - readystatechange event</title> 
</head> 
<body> 
<img id="img1" src="http://pic1.win4000.com/wallpaper/f/51c3bb99a21ea.jpg"> 
<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属性

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>img - complete attribute</title> 
</head> 
<body> 
<img id="img1" src="http://pic1.win4000.com/wallpaper/f/51c3bb99a21ea.jpg"> 
<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则表明图片已经加载完毕,停止轮询。该属性所有浏览器都支持。
使用JavaScript判断图片是否加载完成的三种实现方式 
Javascript 相关文章推荐
jQuery实现列表自动循环滚动鼠标悬停时停止滚动
Sep 06 Javascript
AngularJS基础学习笔记之简单介绍
May 10 Javascript
jquery实现简单的表单验证
Nov 17 Javascript
js实现继承的5种方式
Dec 01 Javascript
JavaScript头像上传插件源码分享
Mar 29 Javascript
jQuery基于toggle实现click触发DIV的显示与隐藏问题分析
Jun 12 Javascript
js+html制作简单日历的方法
Jun 27 Javascript
详解vue-cli与webpack结合如何处理静态资源
Sep 19 Javascript
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
Oct 23 Javascript
js微信分享接口调用详解
Jul 23 Javascript
layui.tree组件的使用以及搜索节点功能的实现
Sep 26 Javascript
JQuery绑定事件四种实现方法解析
Dec 02 jQuery
使用JavaScript获取电池状态的方法
May 03 #Javascript
JavaScript打印网页指定区域的例子
May 03 #Javascript
js检测输入内容全为空格的方法
May 03 #Javascript
JS兼容浏览器的导出Excel(CSV)文件的方法
May 03 #Javascript
离开当前页面前使用js判断条件提示是否要离开页面
May 02 #Javascript
js日期联动示例
May 02 #Javascript
jQuery实现的多选框多级联动插件
May 02 #Javascript
You might like
PHP生成静态页面详解
2006/11/19 PHP
深入理解require与require_once与include以及include_once的区别
2013/06/05 PHP
客户端 使用XML DOM加载json数据的方法
2010/09/28 Javascript
javascript阻止浏览器后退事件防止误操作清空表单
2013/11/22 Javascript
JSONP获取Twitter和Facebook文章数的具体步骤
2014/02/24 Javascript
NodeJS使用jQuery选择器操作DOM
2015/02/13 NodeJs
jquery自定义插件结合baiduTemplate.js实现异步刷新(附源码)
2016/12/22 Javascript
js+canvas实现动态吃豆人效果
2017/03/22 Javascript
完美解决浏览器跨域的几种方法(汇总)
2017/05/08 Javascript
js 索引下标之li集合绑定点击事件
2018/01/12 Javascript
微信小程序实现星星评价效果
2018/11/02 Javascript
node使用Mongoose类库实现简单的增删改查
2018/11/08 Javascript
关于vue2强制刷新,解决页面不会重新渲染的问题
2019/10/29 Javascript
微信小程序使用前置摄像头拍照
2020/10/22 Javascript
[43:32]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS NewBee第一场
2014/05/26 DOTA
python实现桌面托盘气泡提示
2019/07/29 Python
PyCharm取消波浪线、下划线和中划线的实现
2020/03/03 Python
浅谈如何使用python抓取网页中的动态数据实现
2020/08/17 Python
如何创建一个Flask项目并进行简单配置
2020/11/18 Python
Python中return函数返回值实例用法
2020/11/19 Python
python中Mako库实例用法
2020/12/31 Python
英国泰坦旅游网站:全球陪同游览,邮轮和铁路旅行
2016/11/29 全球购物
TUMI马来西亚官方网站:国际领先的高品质商旅箱包品牌
2018/04/26 全球购物
给客户的道歉信
2014/01/13 职场文书
园林技术个人的自我评价
2014/02/15 职场文书
十佳党员事迹材料
2014/08/28 职场文书
个人授权委托书模板
2014/09/14 职场文书
政风行风评议个人心得体会
2014/10/29 职场文书
销售员自我评价
2015/03/11 职场文书
司机岗位职责范本
2015/04/10 职场文书
参加招聘会后的感想
2015/08/10 职场文书
小学一年级语文教学反思
2016/03/03 职场文书
Nginx进程管理和重载原理详解
2021/04/22 Servers
python如何利用cv2模块读取显示保存图片
2021/06/04 Python
python实现剪贴板的操作
2021/07/01 Python
PHP 时间处理类Carbon
2022/05/20 PHP