0

单击缩略图时，我正在使用 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。我做错了什么，但在哪里？

4

2 回答 2

4

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

于 2012-02-15T08:59:46.460 回答
0

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

于 2012-02-15T09:08:18.857 回答