Skip to content →

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

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”]

SHARE

PROFILE

入江 慎吾
イリテク株式会社代表取締役 / メンターマッチングサービスMENTAを運営(月間流通額700万突破)/ 累計20個以上のWEBサービスやアプリを開発 / CAMPFIREとコミュニティツールVoyageを共同開発中 / 「自分のサービスで生きていく」をコンセプトに個人開発オンラインサロン「入江開発室」を運営(詳しいプロフィール)

SPONSER

Published in 開発奮闘記