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

2019独角兽企业重金招聘Python工程师标准>>>

最近的项目涉及到图片的onload事件，问题看起来挺简单的，做起来确是问题多多

首先，onload事件需在图片载入前绑定好，onload事件不能冒泡，所以不能用jquery的live绑定

这里特别要提的一点是，如果img是一个普通的image对象，在有onload的情况下，不可用以下方法将其添加到DOM中，如：

$('body').append($(img));或者$('body').append('<img src="" οnlοad="" />');

这样子的话，图片的onload事件会触发多次，因为jquery的append方法的机制是先添加到DOM中，再删除

不过例如$('<img src="" οnlοad="" />')之类的也是同样道理。

所以在用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);

转载于:https://my.oschina.net/arrowing/blog/110048