jquery - Jquery onLoad 现在不存在的图像

Question

我有带有图像的容器

<div class='container'>
    <img src='...' />
    <img src='...' />
    <img src='...' />
</div>

图像是动态加载的。有没有办法以类似'jQuery-on'的样式绑定跨浏览器（IE7 +）onLoad事件，如下所示（伪代码）：

$(element).one('load', 'img', function () {
    // my callback
}).each(function () {
    if (this.complete || image.naturalWidth > 0) $(this).load();
});

Answer 1

在这种情况下，将事件处理程序附加到容器将不起作用，因为图像加载事件不会冒泡。（如果您正在阅读规范文档，HTML 规范说图像加载事件是一个“简单事件”——这是一种不会冒泡的事件。）

相反，您必须将处理程序单独附加到每个动态加载的图像，如下所示：

// Add an image dynamically
$("<img/>")

    // Attach the load handler individually to each image being loaded
    .load(onLoad)

    .attr("src", "http://placekitten.com/" + width + "/" + height)
    .appendTo($(".container"));

一个有效的例子：http: //jsfiddle.net/dmillz/ZmFfv/