在需要对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属性即可。
复制代码 代码如下:
<!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属性即可。
标签：
onload事件,事件绑定
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
暂无“img onload事件绑定各浏览器均可执行”评论...
更新动态
2024年11月18日
2024年11月18日
- 好薇2024《兵哥哥》1：124K黄金母盘[WAV+CUE]
- 胡歌.2006-珍惜（EP）【步升大风】【FLAC分轨】
- 洪荣宏.2014-拼乎自己看【华特】【WAV+CUE】
- 伊能静.1999-从脆弱到勇敢1987-1996精选2CD【华纳】【WAV+CUE】
- 刘亮鹭《汽车DJ玩主》[WAV+CUE][1.1G]
- 张杰《最接近天堂的地方》天娱传媒[WAV+CUE][1.1G]
- 群星《2022年度发烧天碟》无损黑胶碟 2CD[WAV+CUE][1.4G]
- 罗文1983-罗文甄妮-射雕英雄传(纯银AMCD)[WAV+CUE]
- 群星《亚洲故事香港纯弦》雨果UPMAGCD2024[低速原抓WAV+CUE]
- 群星《经典咏流传》限量1：1母盘直刻[低速原抓WAV+CUE]
- 庾澄庆1993《老实情歌》福茂唱片[WAV+CUE][1G]
- 许巍《在别处》美卡首版[WAV+CUE][1G]
- 林子祥《单手拍掌》华纳香港版[WAV+CUE][1G]
- 郑秀文.1997-我们的主题曲【华纳】【WAV+CUE】
- 群星.2001-生命因爱动听电影原创音乐AVCD【MEDIA】【WAV+CUE】