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();
});

ここでの奇妙な点は、ロードが完了すると、最初に期待どおりに1つのログを書き込むことです。しかし、2回目は、前のサイズの2倍（2）になります。3回目は、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それをもう一度行うことができます。このように:ただし、メソッドは「load」に登録されているすべてのハンドラーを削除する$e.unbind('load').load(function(){}) ことに注意してください。unbind

于 2012-02-15T09:08:18.857 に答える