WEBサイトでページの最下部までスクロールした時にローディング画像を表示し、
次に表示するコンテンツを自動で読込んで出力するようなページを見ることがあります。
FacebookやTwitterなどは、同じようにページの下までスクロールすると情報を読み込んで出力します。
jQueryの「jQuery.Bottom」プラグインを使用すれば同じような動作をさせることが可能です。
下記より、ダウンロードすることができます。
jquery.bottom-1.0.js
下記にjQueryの「jQuery.Bottom」プラグインの使用して、ページの最下部までスクロールした時に自動的にコンテンツを表示させる時の使用方法をメモします。
■ 「jquery.bottom-1.0.js」プラグインの使用方法
【JS】
jQueryとjquery.bottom-1.0.jsを読み込みます。
下記はwindowオブジェクトに対して使用するように設定しています。
また、コンテンツに対してbottom.jsを指定することも可能です。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.bottom-1.0.js"></script>
<script type="text/javascript">
$(function() {
// オプションのproximityでbottom.jsを発生する位置を指定する
$(window).bottom({proximity: 0.05});
$(window).bind('bottom', function() {
var obj = $(this);
// 「loading」がfalseの時に実行
if (!obj.data('loading')) {
// 「loading」をtrueにする
obj.data('loading', true);
// ローディング画像を表示
$('#loadimg').html('<img src="load.gif" />');
// 追加したい処理を記述
setTimeout(function() {
// ローディング画像を削除
$('#loadimg').html('');
// 追加するHTMLを指定
$('#wrap').append('<div class="box">test</div><div class="box">test</div><div class="box">test</div>');
// 処理が完了したら「loading」をfalseにする
obj.data('loading', false);
}, 1500);
}
});
// リロードしたときにページの先頭を表示する
$('html,body').animate({ scrollTop: 0 }, '1');
});
</script>
proximityオプションでbottom.jsを発生する位置を指定することが可能です。
proximityの数値によってイベントを行う距離を指定します。
イベント時、「loading」がfalseの時に処理を実行するようにしています。
イベントが発生した時に「loading」をtrueにし、ローディング画像を表示します。
setTimeoutに追加するコンテンツの処理を記述します。
ローデング画像を削除し、処理が完了したら「loading」をfalseにします。
また、スクロールの位置がイベントを発生する位置にある時にリロードすると
追加する要素が連続で表示してしまうので下記を追加してます。
$('html,body').animate({ scrollTop: 0 }, '1');
【CSS】
cssで出力する要素のスタイルを指定します。
<style type="text/css">
#wrap {
width: 800px;
margin: 0 auto;
}
.box {
width: 150px;
height: 150px;
margin: 10px;
padding: 10px;
border: 3px dashed #CCCCCC;
float: left;
}
#loadimg {
padding-top: 50px;
clear: both;
text-align: center;
}
</style>
【HTML】
最初に表示する要素を記述します。
下までスクロールすると最初に表示している要素の後に追加されます。
<div id="wrap">
<div class="box">test</div>
<div class="box">test</div>
<div class="box">test</div>
<div class="box">test</div>
<div class="box">test</div>
<div class="box">test</div>
<div class="box">test</div>
<div class="box">test</div>
<div class="box">test</div>
<div class="box">test</div>
<div class="box">test</div>
<div class="box">test</div>
<div class="box">test</div>
<div class="box">test</div>
・
・
・
（省略）
</div>
<div id="loadimg"></div>
最初に表示している要素が全て画面に表示されている状態だと
bottomイベントが発生しないので注意です。
追加するコンテンツをajaxなどでデータを取得するようにすれば、
データベースの情報などを出力できていいと思います。
また、表示する最大件数を設定する場合などは
追加した数をカウントして制限をかける必要があります。
