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规范会说image load event是“simple event” - 这是一种不会冒泡的事件。）

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

// 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/

Jquery onLoad现在不存在图像

1 个答案: