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

2018/03/23更新 カテゴリー:開発奮闘記 タグ: ,
  • このエントリーをはてなブックマークに追加

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

SPONSOR

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

フリーランスエンジニアの稼ぎ方

  • このエントリーをはてなブックマークに追加
SPONSOR

PROFILE

プロフィール

入江 慎吾
自分が作ったサービスで生きていく。同じゴールを目指すサービス開発集団「入江開発室」を運営(現在約280名) / 個人間スキルシェアサービス「MENTA」は約1ヶ月で売上100万円を達成。1日で100社が利用した「JobTag」など多数開発
(詳しいプロフィール)

PRODUCT

イリテクで開発したプロダクト

RELATION

関連する記事

SPONSOR

TAG

タグから記事をさがす