【jscroll】jQueryで無限ロード/スクロールの実装方法

Contents

無限ロード/スクロールとは？
実装方法
- 読み込んだページへのjavascriptの適用方法
最後に🙇‍♂️

無限ロード/スクロールとは？

ページ遷移する際に次へボタン等を押すのではなく、スクロールするだけで次のページが読み込まれる機能。

こういうやつです。

実装方法

jscrollはjQueryの無償のプラグインですが今回はCDNを使用して実装します。

CDN

<script src="//unpkg.com/jscroll/dist/jquery.jscroll.min.js"></script>

上記コードをhead内にコピペすれば使える状態になります。

次にjscrollを実装するコードコードの部分です。

<script>


$(function() {
  // $('.for-data').jscroll();  
    
  var jscrollOption = {
      loadingHtml: 'loading', // 記事読み込み中の表示文字列
      autoTrigger: true, // 次の表示コンテンツの読み込みを自動( true )か、ボタンクリック( false )にする
      padding: 20, // autoTriggerがtrueの場合、指定したコンテンツの下から何pxで読み込むか指定
      nextSelector: 'a.pagination-next', // 次に読み込むコンテンツのURLのあるa要素を指定
      contentSelector: '.for-data', // 読み込む範囲を指定、指定がなければページごと読み込む
      callback: function(){//新たに読み込まれたページにはjavascriptが当たらないので、ここに追加すれば読み込まれる
        $('.slider').bxSlider();
        $.getScript("{% static 'myapp/js/main.js'  %}");
      }
  }
  $('.for-data').jscroll(jscrollOption);
});

</script>

<div class="for-data">
  {%block index%}{% endblock %}
　<a href="next" class="pagination-next">次へ</a>
</div>

上記だけで無限ロードが実装できます。

jscrollを使用すれば無限ロードは一瞬で実装することができます。

一つだけ気を付けることはデフォルトでは無限ロード/スクロールでページを読み込んでも、読み込んだページにはjavascriptが適用されないということです。

読み込んだページへのjavascriptの適用方法

オプションに、読み込みたいjavascriptのコードもしくはファイルを記載することで、読み込んだページにもjavascriptが適用されるようになります。

      callback: function(){
　　　　　　　　　　　　　　　　//ここに任意のjavascriptを記述する。
        $('.slider').bxSlider();

　　　　　　　　　　　　　　　　//外部ファイルを読み込むことも可能
        $.getScript("{% static 'myapp/js/main.js'  %}");
      }