Загрузка изображения jQuery - многократное выполнение функции

Question

Я загружаю изображение и добавляю его в элемент img внутри DOM с помощью 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 раз.

Я не уверен, что здесь происходит.Когда я проверяю, сколько элементов 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:

Кроме того, теперь я понял, что этопотребляет много процессора на клиентской машине.Я делаю что-то не так, но где?

Answer 1

Это потому, что вы добавляете новый обработчик load() каждый раз, когда изображение меняется.

Answer 2

Вы НЕ должны связывать обработчик load() внутри метода click. Или вы можете unbind обработчик load и bind снова. Как это: $e.unbind('load').load(function(){}) Но будьте осторожны, метод unbind удаляет ВСЕ обработчики, зарегистрированные с 'load'.