img onload事件绑定各浏览器均可执行


Posted in Javascript onDecember 19, 2012

在需要对img进行onload事件绑定的时候,一般大家都会想到用常规的方法进行事件绑定,如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>img onload事件绑定(错误用法)</title> 
<script type='text/javascript'> 
window.onload = function(){ 
var img = document.getElementById('imgId'); 
img.onload = function(){ 
alert(1); 
}; 
}; 
</script> 
</head> 
<body> 
<img src='images/06.jpg' id='imgId'/> 
</body> 
</html>

此时大家会发现alert(1)并没有执行,这是什么原因呢?特别是在ie和ff浏览器下。
而且在用到jquery插件库的时候会发现,alert除了在ie和Opera浏览器不弹出来外,其他浏览器均弹出来,这是为什么呢?!
主要是window.onload事件是在页面dom元素加载完后执行,也就包括了img图片中src加载完成。那么img.onload 就不会执行了,
因为其是监听img的src是否加载完成。
那么,如何对img图片进行onload事件绑定呢?具体代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>img onload事件绑定(正确用法)</title> 
<script type='text/javascript'> 
window.onload = function(){ 
var img = document.getElementById('imgId'); 
var src = img.getAttribute('src'); 
img.setAttribute('src',''); 
img.onload = function(){ 
alert(1); 
}; 
img.setAttribute('src',src); 
}; 
</script> 
</head> 
<body> 
<img src='images/06.jpg' id='imgId'/> 
</body> 
</html>

这种方法,在各浏览器下均执行alert(1)。
也就是在页面dom元素加载完成后,获得img的dom对象,获得其src属性,再将其src设置为‘'空,然后监听img的onload事件,最后再设置img的src属性即可。
Javascript 相关文章推荐
javascript倒计时功能实现代码
Jun 07 Javascript
jquery实现固定顶部导航效果(仿蘑菇街)
Mar 21 Javascript
深入理解JavaScript高级之词法作用域和作用域链
Dec 10 Javascript
JS控制一个DIV层在指定时间内消失的方法
Feb 17 Javascript
js实现点击文本框显示日期选择器特效代码分享
May 21 Javascript
BootStrap 表单控件之单选按钮水平排列
May 23 Javascript
如何理解Vue的render函数的具体用法
Aug 30 Javascript
vue :src 文件路径错误问题的解决方法
May 15 Javascript
微信小程序实现城市列表选择
Jun 05 Javascript
vue使用v-for实现hover点击效果
Sep 29 Javascript
vue在路由中验证token是否存在的简单实现
Nov 11 Javascript
JS如何实现网站中PC端和手机端自动识别并跳转对应的代码
Jan 08 Javascript
JavaScript实现快速排序(自已编写)
Dec 19 #Javascript
js 使用form表单select类实现级联菜单效果
Dec 19 #Javascript
JS限制上传图片大小不使用控件在本地实现
Dec 19 #Javascript
JS上传图片前的限制包括(jpg jpg gif及大小高宽)等
Dec 19 #Javascript
js限制文本框输入长度两种限制方式(长度、字节数)
Dec 19 #Javascript
ajax java 实现自动完成功能
Dec 19 #Javascript
JavaScript字符串String和Array操作的有趣方法
Dec 18 #Javascript
You might like
免费的ip数据库淘宝IP地址库简介和PHP调用实例
2014/04/08 PHP
Linux下安装oracle客户端并配置php5.3
2014/10/12 PHP
9个实用的PHP代码片段分享
2015/01/22 PHP
php返回字符串中所有单词的方法
2015/03/09 PHP
smarty简单应用实例
2015/11/03 PHP
PHP实现批量删除(封装)
2017/04/28 PHP
Thinkphp5.0 框架视图view的比较标签用法分析
2019/10/12 PHP
Laravel 中使用简单的方法跟踪用户是否在线(推荐)
2019/10/30 PHP
Laravel5.1 框架数据库操作DB运行原生SQL的方法分析
2020/01/07 PHP
用javascript做拖动布局的思路
2008/05/31 Javascript
javascript实现的像java、c#之类的sleep暂停的函数代码
2010/03/04 Javascript
使用jQuery模板来展现json数据的代码
2010/10/22 Javascript
Javascript面象对象成员、共享成员变量实验
2010/11/19 Javascript
iframe的onload在Chrome/Opera中执行两次Bug的解决方法
2011/03/17 Javascript
使用Node.js实现一个简单的FastCGI服务器实例
2014/06/09 Javascript
Jquery搜索父元素操作方法
2015/02/10 Javascript
正则中的回溯定义与用法分析【JS与java实现】
2016/12/27 Javascript
jquery在vue脚手架中的使用方式示例
2017/08/29 jQuery
js技巧之十几行的代码实现vue.watch代码
2018/06/09 Javascript
微信小程序仿RadioGroup改变样式的处理方案
2018/07/13 Javascript
微信小程序实现留言板(Storage)
2018/11/02 Javascript
使用Bootstrap做一个朝代历史表
2019/12/10 Javascript
基于ts的动态接口数据配置的详解
2019/12/18 Javascript
原生js实现简单轮播图
2020/10/26 Javascript
Python下singleton模式的实现方法
2014/07/16 Python
python主线程捕获子线程的方法
2018/06/17 Python
Python 通过爬虫实现GitHub网页的模拟登录的示例代码
2020/08/17 Python
Java Unsafe类实现原理及测试代码
2020/09/15 Python
vivo智能手机官方商城:vivo
2016/09/22 全球购物
澳大利亚男士西服品牌:M.J.Bale
2018/02/06 全球购物
德国孕妇装和婴童服装网上商店:bellybutton
2018/04/12 全球购物
优秀实习自我鉴定
2013/12/04 职场文书
服务标语口号
2014/07/01 职场文书
立案决定书范文
2015/06/24 职场文书
会议承办单位欢迎词
2019/07/09 职场文书
Python os和os.path模块详情
2022/04/02 Python