スクロールするだけでコンテンツを読み込むプラグイン「jQuery.autopager」

09/05/2012

よく見かけるページングの処理で、下の方にスクロールすると自動的に次ページを読み込ませる処理をかんたんに実現してくれるjQuery.autopagerが便利でした。jQueryプラグインです。

導入がかんたんで分かりやすく、オプションも必要最低限のものがバッチリ揃っています。例えば、スクロールで下部までいったら自動的に次コンテンツを表示させるか、それともボタンをクリックして読み込むか、読み込み後にコールバックで関数を読み込ませるか、などなど。

jQuery.autopagerの導入方法

まず、jQuery本体とダウンロードしたjQuery.autopagerを読み込んでおきます。
そして、スクロールで自動表示させるなら下記だけでOK。

<script type="text/javascript">
    $(function() {
        $.autopager();
    });
  </script>

  <div class="content">
    <p>1ページ目のコンテンツ<br>Contents of page 1</p>
  </div>
  <a href="/jquery/autopager/demo?page=2" rel="next">次のページ / Next</a>

これだけで次々と読み込んでくれます。引数のpageは自動的にプラグイン側で操作して増やしてくれます。

jQuery.autopager

[sc name=”engeneer”]

無料メルマガ＜特典付き＞

個人開発・ビジネスについての有益な情報を無料メルマガでお届けします。

特典：個人開発の教科書＜心得編＞

これまでの個人開発経験を秘伝のタレ的な内容としてエッセンスをまとめました。35ページにわたる大ボリュームです。

個人開発のスキルアップにMENTA

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

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

YouTubeでも個人開発ノウハウを発信中！

PROFILE

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