Django集成Waypoint无限滚动时滚动加载不显示Loading提示

参考相关教程实现Django无限滚动功能，已正确安装依赖并在HTML中引入所需资源，目前滚动触发分页加载时无法看到Loading...提示，相关代码如下：

视图层代码（views.py） #

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>              

按优先级从高到低排查：

• 下一页链接class不匹配插件默认规则
  Waypoint Infinite默认查找下一页链接的选择器是.infinite-more-link，当前代码给下一页a标签加的class是more-link，插件识别不到加载入口，根本不会触发自动加载逻辑，对应的加载回调自然不会执行。
  两种修复方式二选一：

  1. 把a标签的class从more-link改成infinite-more-link
  2. 初始化插件时手动指定选择器：

  var infinite = new Waypoint.Infinite({
      element: $('.grid')[0],
      more: '.more-link',
      onBeforePageLoad: function () {
        $('.loading').show();
      },
      onAfterPageLoad: function ($items) {
        $('.loading').hide();
      }
  });
  

• 分页接口返回了完整HTML页面而非片段
  插件拉取下一页内容时，只会提取目标容器下的内容追加到当前列表，如果视图每次都返回带完整<html>、<head>、重复容器、重复初始化脚本的完整页面，会导致插件执行异常，生命周期钩子不触发。
  修复方式：拆分模板，普通页面请求返回带完整骨架的home.html，AJAX请求只返回商品卡片+下一页链接的片段模板。判断逻辑参考：

  def All(request):
      p = product.objects.all().order_by('id')
      pa = Paginator(p, 20)
      page = request.GET.get('page')
      pro = pa.get_page(page)
      if request.headers.get('x-requested-with') == 'XMLHttpRequest':
          # AJAX请求只渲染列表片段
          return render(request, 'product_list_partial.html', {'pro':pro})
      return render(request, 'home.html', {'pro':pro})
  

• Loading元素定位问题导致不可见
  就算JS正常触发了显示逻辑，如果.loading放在容器底部的可视区域外，或者被其他元素遮挡，也看不到提示。可以先给加载提示加固定定位测试：

  .loading {
      position: fixed;
      left: 50%;
      bottom: 24px;
      transform: translateX(-50%);
      z-index: 999;
      padding: 8px 16px;
      background: #fff;
      border-radius: 4px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  }
  

• 脚本初始化时机错误
  如果初始化脚本执行时，jQuery、Waypoint依赖还没加载完成，或者.grid元素还没渲染到DOM树，会导致插件实例创建失败，回调不生效。把脚本移到</body>标签前，或者加DOM加载完成包裹：

  $(function() {
      // 将Waypoint初始化代码放在此处
  })
  

内容的提问来源于stack exchange，提问作者3an