Почему я не могу увидеть "Loading..." при прокрутке?

Основано на этом учебнике

Вот мои взгляды:

def All( request  ):
    p=product.objects.all().order_by('id')
    pa=Paginator(p,20)
    page=request.GET.get('page')
    pro=pa.get_page(page)
    return render(request,'home.html',{'pro':pro})

Это мой шаблон:

<div class="grid">  
  
         {%for p in pro%} 
                <div class='card'>
                    <img src="{{p.image}}"></img>
                    <p id="id">{{p.description}}</p>
                    <a href="{{p.buy}}" target='_blank' rel='noopener noreferrer'>
                        <button ><span class="price"> ${{p.price}}</span> buy</button>
                    </a>    




                </div>
    
         {%endfor%} 
         {% if pro.has_next %}
            <a class='more-link' href="?page={{pro.next_page_number}}">Next</a>
         {% endif %}
         <div class="loading" style="display: none;">
                Loading...
         </div>
         <script>
                    var infinite = new Waypoint.Infinite({
                      element: $('.grid')[0],
                      onBeforePageLoad: function () {
                        $('.loading').show();
                      },
                      onAfterPageLoad: function ($items) {
                        $('.loading').hide();
                      }
                    });
         </script>
</div>              

Я правильно загрузил зависимости и включил некоторые ссылки в свой html для их использования, но в настоящее время я не могу найти, что не так с моим кодом.

ответ сервера

Почему я не вижу Loading... при прокрутке?

Вернуться на верх