Waypoint Infinite Scroll一次性加载全部页面，如何实现逐页加载？

Hey there, I’ve run into this exact issue with Waypoints Infinite Scroll in Django before—let’s break down what’s going wrong and fix it step by step.

First, Let’s Diagnose the Problem #

The core issue here is either:

1. Your initial page content is too short, so the bottom of the infinite-container is already in view when the page loads, triggering endless consecutive loads.
2. The offset parameter was set incorrectly (negative values make the trigger condition too strict, while the default bottom-in-view is too loose for short initial content).

Step 1: Update Your Django Template #

First, add a loading state element (your JS references it but it’s missing in the template) and keep the existing structure:

<div class="infinite-container">
  {% for item in arbitrase_records %}
    <div class="col-lg-3 arbitrase-item">
      <!-- Your item content here -->
    </div>
  {% endfor %}
</div>

<!-- Add this loading state element (hidden by default) -->
<div class="infinite-loading" style="display: none; text-align: center; padding: 1rem;">
  Loading more items...
</div>

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

I hid the "More" link since we don’t need it visible—Waypoints will use it behind the scenes.

Step 2: Fix the Waypoints JavaScript #

Adjust the configuration to control when loading triggers, and ensure we only load one page at a time:

<script src="{% static 'theme/js/waypoints/lib/jquery.waypoints.min.js' %}"></script>
<script src="{% static 'theme/js/waypoints/lib/shortcuts/infinite.min.js' %}"></script>
<script>
$(function() {
  // Wait for DOM to fully load before initializing Waypoints
  var infinite = new Waypoint.Infinite({
    element: $('.infinite-container')[0],
    items: '.col-lg-3.arbitrase-item',
    more: '.infinite-more-link', // Explicitly define the "more" link selector
    onBeforePageLoad: function () {
      $('.infinite-loading').show();
    },
    onAfterPageLoad: function ($items) {
      $('.infinite-loading').hide();
      // Optional: Bind events to newly loaded items here if needed
      // $items.find('.your-interactive-element').on('click', function() { ... });
    },
    offset: 300, // Trigger load when 300px away from the container bottom
    resetOnError: true, // Stop loading if there's an error
    loadingClass: 'infinite-loading'
  });
});
</script>

Key Adjustments Explained #

• offset: 300: This tells Waypoints to trigger loading when the user scrolls to 300 pixels above the bottom of the infinite-container. Tweak this number based on your page’s height—make it large enough that the initial page doesn’t trigger a load immediately, but small enough that users don’t have to scroll all the way to the bottom.
• Explicit more selector: Ensures Waypoints only uses the exact link we provide, avoiding automatic detection bugs that could cause multiple loads.
• Wrapped in $(function() { ... }): Guarantees we initialize Waypoints only after the DOM is fully loaded, so it can find all elements correctly.

Extra Checks to Prevent Full-Page Loads #

1. Adjust Django Pagination: Make sure your view uses a reasonable page size (e.g., Paginator(your_queryset, 8)). If you only load 4 items per page (one row of col-lg-3), the container bottom will be in view immediately, triggering endless loads.
2. Ensure Initial Content Length: If your first page still feels too short, add some extra content (like a footer or padding) at the bottom of the page to push the container out of the initial viewport.

内容的提问来源于stack exchange，提问作者Anuj TBE