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

我正在加载图像，并在单击缩略图时将它添加到DOM中带有jQuery的img元素中。这里是一个确实的代码：jQuery图像加载 - 多个完成功能执行

$("#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次。

我不确定这里发生了什么。当我检查有多少元素#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。我做错了，但在哪里？

来源

2012-02-15 tugberk

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

来源

2012-02-15 08:59:46

谢谢！所以我认为我的实现是错误的。我编辑了这个问题。你能看看吗？ – tugberk 2012-02-15 09:03:32

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

来源

2012-02-15 09:08:18 xiaowl

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

回答

相关问题