无法用航点计算无限滚动

Question

尝试使用 Waypoints 应用无限滚动，但似乎无法正常工作。

在我的base.html 下载并保存到我的static 文件夹后，我在我的base.html 中加载了以下脚本：

    <script src="{% static 'js/jquery-3.5.1.min.js' %}"></script>
    <script src="{% static 'js/jquery.waypoints.min.js' %}"></script>
    <script src="{% static 'js/infinite.min.js' %}"></script>

然后我的模板中有以下代码从base 扩展而来：

{% extends "base.html" %}
{% load static %}

{% block css %}
  <link rel="stylesheet" href="{% static 'home/main.css' %}">
{% endblock css %}

{% block content %}

  <br>

  <div class="container status-update">
    <div class="container">
      <form>
        <div class="input-group-lg">
          <input type="text" class="form-control" value="What's new?">
        </div>
        <br style="height:20px">
        <button type="submit" class="btn btn-primary btn-lg" name="button">Post</button>
      </form>
    </div>
  </div>

  <br>

  <div class="container">
    <nav class="navbar navbar-expand-lg navbar-light" style="background-color: #6298bf">
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <div class="navbar-nav">
          <a class="nav-link active" href="{% url 'home' %}">Activity Feed</a>
          <a class="nav-link" href="{% url 'vehicle_updates' %}">Vehicle Updates<span class="sr-only">(current)</span></a>
          <a class="nav-link" href="/space.html">Garage Updates</a>
        </div>
      </div>
    </nav>
  </div>

  <br>

  <div class="container">
    <div class="primary-segments">
      <h2>Activity Updates</h2>

      <div class="infinite-container">
        {% for post in posts %}
          <div class="infinite-item">
            <div class="card m-3">
              <div class="card-body" style="background-color:#bdcade; padding-bottom:0px">
                <div class="media mb-3">
                  <img src="{{ user.profile.image.url }}" class="d-block ui-w-40 rounded-circle" style="width:40px;height:auto;" alt="">
                  <div class="media-body ml-3">
                    <h5 style="color:#ffffff">{{ post.user.first_name }} {{ post.user.last_name }}</h5>
                    <div class="small text-muted">Yesterday</div>
                  </div>
                </div>
              </div>

              {% if post.image %}
                <img src="{{ post.image.url }}" class="card-img-top" alt="">
              {% endif %}

              <div class="card-body">
                <h5 class="card-title">{{ post.title }}</h5>
                <p class="card-text">{{ post.content }}</p>
                <div class="btn-group" role="group">
                  <button type="button" class="btn btn-secondary">Like</button>
                  <button type="button" class="btn btn-secondary">Comment</button>
                </div>
              </div>
            </div>
          </div>

        {% endfor %}
      </div>

      {% if page_obj.has_next %}
        <a class="infinite-more-link" href="?page={{ page_obj.next_page_number }}">More</a>
      {% endif %}

    </div>
  </div>

  <script type="javascript">
    var infinite = new Waypoint.Infinite({
      element: $('.infinite-container')[0]
    });
  </script>

{% endblock content %}

当我运行服务器并加载页面时，它只在页面底部显示一个“更多”按钮，我可以单击该按钮将我带到下一组对象（在视图中将分页设置为 3） .

当我运行服务器时，它看起来并没有在控制台中引发任何错误，所以我不确定下一步该去哪里寻找问题。任何帮助将不胜感激。

Answer 1

想通了。

将 JS 脚本标签从 body 的底部向上移动到 head 并开始工作。不知道这种位置依赖性。