jquery与图片onload事件不得不说的故事

原创
2013/02/24 13:45
阅读数 2.7K

最近的项目涉及到图片的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事件。

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);


展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
0 收藏
1
分享
返回顶部
顶部