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

【问题标题】：jQuery image load - multiple finish function executionjQuery图像加载 - 多个完成功能执行
【发布时间】：2012-02-15 08:57:49
【问题描述】：

当单击缩略图时，我正在使用 jQuery 加载图像并将其附加到 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。我做错了什么，但在哪里？

【问题讨论】：

标签： javascript jquery jquery-load

【解决方案1】：

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

【讨论】：

谢谢！所以我猜我的实现是错误的。我编辑了这个问题。可以看看吗？

【解决方案2】：

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

【讨论】：