Question

我正在加载一个图像，并在点击缩略图时将其附加到DOM内的 img 元素中。这是代码：

$("#holder a").click(function (e) {
    var $this = $(this);
    var $img = $("#picture-holder img");
    $img.attr("src", $this.attr("href")).load(function () {
        console.log("done..");
    });
    e.preventDefault();
});

这里奇怪的是，当它完成加载时，它会在第一次按预期写入一个日志。但第二次，它确实是之前尺寸的两倍（即2）。第三次，它记录了6次。

我不确定这里发生了什么。当我检查有多少 img 元素#picture-holder成立时，它会在每次操作后返回1。

修改1：

我更改了下面的代码并提到问题已经消失，但我不确定它是否是正确的方法：

$("#holder a").click(function (e) {
    var $img = $("#picture-holder img");
    var $_img = $img.clone();
    var _href = this.href;

    $_img.attr("src", _href).load(function () {
        console.log("done..");
        $img.attr("src", _href);
    });
    e.preventDefault();
});

编辑2：

另外，我现在意识到这会在客户端机器上消耗大量CPU。我做错了什么但是在哪里？

Answer 1

这是因为每次图像更改时都会添加一个新的load()处理程序。

Answer 2

您不应该在load()方法中绑定click处理程序。或者，您可以再次unbind load处理程序和bind。像这样：$e.unbind('load').load(function(){}) 但要小心，unbind方法删除所有使用'load'注册的处理程序。

jQuery图像加载 - 多个完成功能执行

2 个答案: