無限スクロールにロード中を表示する【Kaminari】

Question

###実現したいこと
Kaminariを使って、無限スクロールを実装しました。
最下部に辿りつくと、自動で次のページがロードされるのですが、ロードされるまでの間に、「ロード中..」のgifを表示させたいです。
無限スクロールは以下のサイトを参考に作りました。
https://qiita.com/s_yasunaga/items/ab17424912ee90f853d7

現状、最下部に「Loading...」（設定した覚えはないためデフォルトでしょうか？）との表示は出現します。

###コード
application.html.erb

<script src="https://cdnjs.cloudflare.com/ajax/libs/jscroll/2.4.1/jquery.jscroll.min.js"></script>

index.html.erb

<div class="main posts-index">
    <div class="container">
      <div id="items">
        <%= render 'items' %>
      </div>
    </div>
</div>

_items.html.erb

<ul class="skill-list jscroll">
  <% @posts.each do |post| %>
    <p><%= post.title %></p>
  <% end %>
  <%= paginate @posts %>
</ul>

$('#items').append("<%= escape_javascript(render 'items', object: @posts) %>")
$("#more_link").replaceWith("<%= escape_javascript(link_to_next_page(@posts, 'もっと見る',class: 'items_btn', remote: true, id: 'more_link')) %>");

$(document).on('turbolinks:load', function() {
  $(window).on('scroll', function() {
    scrollHeight = $(document).height();
    scrollPosition = $(window).height() + $(window).scrollTop();
    if ( (scrollHeight - scrollPosition) / scrollHeight <= 0.05) {
          $('.jscroll').jscroll({
            contentSelector: '.skill-list',
            nextSelector: 'span.next:last a',
          });
    }
  });
})

###試したこと
https://ruby-rails.hatenadiary.com/entry/20141115/1416021886
のサイトを参考にもし、下記のように利用していたので、試しましたが効果はありませんでした。

loading: {
      img:     "http://www.mytreedb.com/uploads/mytreedb/loader/ajax_loader_blue_48.gif",
      msgText: "ロード中..."
},

$(document).on('turbolinks:load', function() {
  $(window).on('scroll', function() {
    scrollHeight = $(document).height();
    scrollPosition = $(window).height() + $(window).scrollTop();
    if ( (scrollHeight - scrollPosition) / scrollHeight <= 0.05) {
          $('.jscroll').jscroll({
            loading: {
      img:     "http://www.mytreedb.com/uploads/mytreedb/loader/ajax_loader_blue_48.gif",
      msgText: "ロード中..."
    }, #こちらのloadingを追加
            contentSelector: '.skill-list',
            nextSelector: 'span.next:last a',
          });
    }
  });
})

お分かりの方、ぜひご教示お願いします。

Answer 1

ぼくのように英語が苦手な人の実装作業の流れ

---

①Qiitaなどの記事をみて実装する
↓　だめな場合
②他の記事をみて実装する
↓　だめな場合
③公式を見る。（だいたい解決する）
↓　だめな場合
④StackOverflowを見る。

---

①〜②ではバージョンアップで実装方法が変わっていたりするためうまくいかないことがあります。
また③の公式を見るときはQ＆A、Githubならissueまで見るとより良いかと思います。

前置きが長くなりましたが下記でいかがでしょうか？
jscroll公式：Customizing

Comments

[tomtom1]

解決しました！ありがとうございます！
公式を拝見し、それ以降に答えを探したら行き着きました！
js部分が以下のような記述で、解決しましたが、位置指定がうまく行きません。アドバイスございましたらぜひお願いします。
https://teratail.com/questions/251840?modal=q-comp