スクロールで下にいくとページの自動読み込みができるjQueryライブラリ「jquery_bottom」

06/19/2015

Twitter等でも採用されている自動ローディング。下のほうにスクロールすると、自動で次の情報を読み込むやつのことです。今回は、これをかんたんに実装できるのがjQueryライブラリjquery_bottomの使い方をご紹介します。

jquery_bottomをダウンロード

まずはgithubにあるjquery_bottomをダウンロード。実際に使うのは解凍したフォルダ内にある「jquery.bottom-1.0.js」のみ。こちらを読み込ませます。

<ul class="data">
<li>sample</li>
<li>sample</li>
</ul>
<div class="loading"></div>

<script src="js/jquery.bottom-1.0.js"></script>

<script>
$(function ()
{
  var page = 0; //ページ番号
  var end_flag = 0; //最後のページまでいったら1にして次から読み込ませない
  $(window).bottom({proximity: 0.1}); //proximityを0.5にするとページの50％までスクロールするとloadingがはじまる
  $(window).bind("bottom", function() {

    if(end_flag==0){ //ページが最後までいってなければ

      var obj = $(this);
 
        if (!obj.data("loading")) {
 
          obj.data("loading", true);
 
          $('.loading').append('loading...'); //画面にloading...と表示
 
          setTimeout(function() {

            $.ajax('data.php', { //data.phpが実際に表示するデータを読み込むファイル
               method: 'GET',
               data:{page:++page},
               error: function(xhr, error) {
                console.log('失敗しました');
                console.log(error);
               },
               success: function(response) {
                  $(".loading").empty(); //画面に出ているloading...を空にする
                  if(response!="end"){
                    $(".data").append(response); //コンテンツを追加
                  }else{
                    end_flag=1;
                  }
               } //success
            }); //ajax

            obj.data("loading", false);
          }, 1000);
        }

      } //end_flag
  });

});

</script>

ページの下の方へ行くと、スクリプトが動いてajaxでdata.phpを読み込みます。その時にページ番号を渡して、data.phpで表示させるデータを作って戻しています。

jquery_bottom

[sc name=”engeneer”]

スキルアップにMENTA

MENTAはいろんなプロに相談できるNo1メンターサービスです。

僕自身もプロダクトの壁打ち・相談にのっています。個人開発でもコードレビュー、セキュリティ面のチェック、デザイン、広告、コンテンツマーケ、SNS集客について相談する、など使えます。

YouTubeでも発信中！

PROFILE

入江慎吾
あらゆるスキルが学べるパーソナルメンターサービスMENTAの代表／個人開発が好きでこれまでに30個ほどのWEBサービスやアプリを作ってきました／福岡のWEB制作会社勤務→フリーランスエンジニア→法人立ち上げ→M&A億単位の売却を経験。（詳しいプロフィール）