こんぬつは、ミート肉です。
jqueryを使ってギャラリーコンテンツを作ろうと思ったんですが、画像を表示するたびに何だか動作が重くなるんですよね。
で、調べてみると.click()イベントの中に記述しているイベントが、.click()イベントが発生する回数だけループしていることが分かったのです！！
ひぃーっ∑(ﾟロﾟ ; )！！
なので今回はそれの解消法です。
まぁ、クリックイベント自体はこんな感じです。
//メイン画像
var Image = $(‘img’);
//現在表示されている画像のパスとナンバリングされている番号を取得
var Src = $(‘img’).attr(‘src’);
var arrImage = Src.split(‘/’);
var ImagePath = arrImage[1];
var ImageNum = Number(ImagePath.replace(/.jpg/g,”));
//次の番号をセット
var NextNum = ImageNum+1;
//画像を一度フェードアウトさせて新しい画像に入れ替える
Image.fadeOut(‘slow’,function(){
//新しい番号を元にサムネイルから次の画像のパスを取得
var NewSrc = $(‘#Thum-‘+NextNum).find(‘a’).attr(‘href’);
//メイン画像のパスを新しいモノと入れ替える
Image.attr(‘src’,NewSrc);
//新しい画像を読み込み終わったら発生するイベント（←これがループしちゃう）
Image.bind(‘load’,function(){
Image.fadeIn(‘slow’);
});
});
});
で対処法はとっても簡単。
ループしていしまうイベントの最後の処理に以下の一文を付ける。
つまりは、クリックイベントを発生させるたび同じイベントが増えて行くと言う作りになってしまうので、上記に一文でイベントを毎回削除してやれば大丈夫と言うお話。
前にも一回これでハマったからちゃんとメモしておかなきゃ(´･ω･｀)