jQuery

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

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

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

こういうやつです。

 

 

実装方法

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'  %}");
      }

 

最後に🙇‍♂️

今回の機能を実際に実装して作ったサービスが以下になります。

一度、ご利用いただければと思います。

→現在、稼働を停止しております。。(閲覧自体は可能です。)

どっちらいく

あなたはどっちを選ぶ?どっちらいくとは? どっちらいく どっちらいくとはユーザが投稿した2択のテーマ(お題)に関してどっちが 好きか、良いか、イケてる...

今回の機能について等々、それ以外のことでもいつでもご質問お待ちしております!