jquery与图片onload事件不得不说的故事
2013-02-24 13:45
225 查看
最近的项目涉及到图片的onload事件,问题看起来挺简单的,做起来确是问题多多
首先,onload事件需在图片载入前绑定好,onload事件不能冒泡,所以不能用jquery的live绑定
这里特别要提的一点是,如果img是一个普通的image对象,在有onload的情况下,不可用以下方法将其添加到DOM中,如:
$('body').append($(img));或者$('body').append('<img src="" onload="" />');
这样子的话,图片的onload事件会触发多次,因为jquery的append方法的机制是先添加到DOM中,再删除
不过例如$('<img src="" onload="" />')之类的也是同样道理。
所以在用jquery处理带有onload事件的图片时,需小心对待。
解决方法有:
1、在载入onload事件后,移出图片的onload事件。
2、使用append的时候应这样写代码
原来的:
首先,onload事件需在图片载入前绑定好,onload事件不能冒泡,所以不能用jquery的live绑定
这里特别要提的一点是,如果img是一个普通的image对象,在有onload的情况下,不可用以下方法将其添加到DOM中,如:
$('body').append($(img));或者$('body').append('<img src="" onload="" />');
这样子的话,图片的onload事件会触发多次,因为jquery的append方法的机制是先添加到DOM中,再删除
不过例如$('<img src="" onload="" />')之类的也是同样道理。
所以在用jquery处理带有onload事件的图片时,需小心对待。
解决方法有:
1、在载入onload事件后,移出图片的onload事件。
img.onload = function(){ img.onload = null; img.setAttribute && img.setAttribute('onload', null); //这里千万不能使用$(img),否者会陷入死循环 }
2、使用append的时候应这样写代码
原来的:
var html = '<img src="" onload="" />'; var img = $(html); $('body').append(img);现在的,避免多次使用$方法初始化图片:
var html = '<img src="" onload="" />'; $('body').append(html);
相关文章推荐
- jQuery的document ready与 onload事件——你真的思考过吗?
- 学习JQuery的$.Ready()与OnLoad事件比较
- 图片onload事件触发问题
- dp和px,那些不得不吐槽的故事——Android平台图片文字元素单位浅析 (转)
- jQuery 获得的 onload 事件语法
- (js有关图片加载问题)dom加载完和onload事件
- js 实现图片预加载(js操作 Image对象属性complete ,事件onload 异步加载图片)
- JS中的onload事件和jQuery中的ready事件,如何用JS实现jQuery中的ready
- jQuery $(document).ready()和JavaScript window.onload()事件的区别
- IE处理GIF动画图片onload事件的一个BUG
- jQuery-onload让第一次页面加载时图片是淡入方式显示
- jquery中的ready事件和window.onload的区别
- IE中图片的onload事件无效问题和解决方法
- 图片onload事件触发问题解决方法
- jQuery 中 $(document).ready()事件与js中window.onload()事件的区别
- jQuery $(document).ready()和JavaScript onload事件
- 全面解析jQuery $(document).ready()和JavaScript onload事件
- js 实现图片预加载 (js操作 Image对象属性complete ,事件onload 异步加载图片)
- jQuery的document ready与 onload事件——你真的思考过吗?
- 学习JQuery的$.Ready()与OnLoad事件比较[转]