ページの一番下まで来たらイベントを発生させる(TwitterのTLみたいに)
Twitterみたいに、ページの一番下まできたら、次のページを読み込む(ページング)みたいなのって、割とメジャーだから、どっかにあるかと思ったけど、(情弱で探せなくて)割となかったので、自分がやった方法というかプラギン(GitHub - jimyi/jquery_bottom: jQuery plugin to add a “bottom” event that will be triggered when the user has scrolled to the bottom or within proximity to the bottom of an element.)の使い方を書いておく。
1. そもそも「一番下に来た」とかいうイベントはない
社内のSkypeでJSに詳しい人に聞いてみて分かったことは、そもそも JS or jQury にそんなイベントはない。という事、だから画像が表示されたとか、スクロールのイベントを監視してとかの方法だったらできそう。
なので、情弱な僕はアホの子のように「jQuery Event Bottom」 でぐぐる。そしたらそんな感じのプラギンがあった。lucky!
http://www.jimyi.com/blog/2010/04/25/jquery-plugin-bottom-event/
GitHub - jimyi/jquery_bottom: jQuery plugin to add a “bottom” event that will be triggered when the user has scrolled to the bottom or within proximity to the bottom of an element.
2. jquery.bottom-1.0.js
上の記事に使い方は書いてあるので割愛するけど簡単に言うと以下の2行
$(window).bottom(); //windowオブジェクトに「bottomイベント」を追加 $(window).bind("bottom", function() { alert('hoge'); } ); //追加した「bottomイベント」をbindする。
この２行だけで、windowオブジェクトにbottomイベントが追加されて、ページの一番下まで来ると、bindした関数が実行される。
3. どんな仕組み？
このプラグインは「scrollイベント」を監視して、オブジェクトの高さ(上ではwindowオブジェクト)とスクロール位置から、ページの一番下まで来ただろうという時に、「bottomイベント」を発生させてる。
なのでスクロールする度に、bottomイベントを発生させるかどうかの監視イベントが実行されるし、高速で上下させると、bottomイベントが連続して発生してしまう可能性があるので気をつけて俺。
4. Tips
使う上でこうした方がいいかなーと思った事。
何かをローディング中は、処理をスキップしよう
さっきも書いた通り、いやらしい手つきで、マウスホイールを上下にスクロールさせると、bottomイベントは連続して発生する。そんな時は上の1番目の記事みたいに、ローディング中かどうかを判定して処理をスキップさせた方がよいかも
処理が終わったらunbindしておこう。
たとえば、bottomイベントが不要になったら(もうロードするデータがないとか)ちゃんとunbindしておくと良さそう。bottomイベントだけじゃなくて、jquery-bottomの中で使われてる、scrollイベントもunbindしておいてあげると良いかも。(スクロールすると毎回監視イベントが動くので。)
$(window).unbind('bottom'); $(window).unbind('scroll');
bootomイベントの発生条件を調整する (追記 20110707)
オプションにproximityというパラメータがあるけど、これはデフォルトでは0になっていて、スクロールした距離？とウィンドウの高さが完全に一致した時に、bottomイベントを発生させるという事。
けどたまに完全に0にならないケースもあったりするので、どれくらいの誤差を許すのか設定できます。大体自分が試した環境だと、0.01位に設定しておけば、大体問題ない感じでした。
あまり大きい値を設定すると、ページ下に達する大分前にbottomイベントが発生してしまうので適宜調整すると良いかと。
もっと良いやり方とか、プラグインがあったら教えてくだしあ。
以上、朝ブロ(ぐ)終わり
