title: Django infinite scroll goes through all pages at once without actually loading them
body: <p>I'm implementing infinite scroll for my Django app using <a href="https://simpleisbetterthancomplex.com/tutorial/2017/03/13/how-to-create-infinite-scroll-with-django.html" rel="nofollow noreferrer">this</a> excellent tutorial.</p>
  
  <p>I want the app to load 9 articles then show the "loading..." sign and load 9 more articles. </p>
  
  <p>However, what happens is that when the user hits the bottom, it shows the loading sign and nothing happens. On the terminal I can see that it "GET" requested all the pages at once like this:</p>
  
  <blockquote>
    <p>[06/Jul/2017 18:22:26] "GET /?page=2 HTTP/1.1" 200 19124 [06/Jul/2017
    18:22:27] "GET /?page=3 HTTP/1.1" 200 18774 [06/Jul/2017 18:22:27]
    "GET /?page=4 HTTP/1.1" 200 18772 [06/Jul/2017 18:22:28] "GET /?page=5
    HTTP/1.1" 200 19031 [06/Jul/2017 18:22:28] "GET /?page=6 HTTP/1.1" 200
    18965 [06/Jul/2017 18:22:28] "GET /?page=7 HTTP/1.1" 200 18676
    [06/Jul/2017 18:22:28] "GET /?page=8 HTTP/1.1" 200 18866 [06/Jul/2017
    18:22:28] "GET /?page=9 HTTP/1.1" 200 19094 [06/Jul/2017 18:22:28]
    "GET /?page=10 HTTP/1.1" 200 18750</p>
  </blockquote>
  
  <p>This is the code in views:</p>
  
  <pre><code>def context_generator(request, title, category):
      """made this function because views are very similar"""
      context_dict={}
  
      if(category == "index"):
          articles_list = Article.objects.order_by('-pub_date')
      else:
          articles_list = Article.objects.filter(category=category).order_by('-pub_date')
  
      page = request.GET.get('page', 1)
      paginator = Paginator(articles_list, 9)
  
      try:
          articles = paginator.page(page)
      except PageNotAnInteger:
          articles = paginator.page(1)
      except EmptyPage:
          articles = paginator.page(paginator.articles_list)
  
      context_dict['articles'] =  articles
      context_dict['title'] = title
  
      return context_dict
  
  def index(request):
      return render(request, 'app_name/index.html', context_generator(request, "page title", "index"))
  </code></pre>
  
  <p>This is index.html:</p>
  
  <pre><code>{% block body_block %}
  
      &lt;div class="container infinite-container"&gt;
  
           {% for article in articles %}
            &lt;!-- render articles --&gt;
           {% endfor %}
  
      &lt;/div&gt;
  
  
      {% if articles.has_next %}
          &lt;a class="infinite-more-link" href="?page={{ articles.next_page_number }}"&gt;More&lt;/a&gt;
      {% endif %}
  
  
      &lt;div class="loading" style="display: none;"&gt;
        Loading...
      &lt;/div&gt;
  
  {% endblock %}
  </code></pre>
  
  <p>This script is in base.html:</p>
  
  <pre><code>&lt;script&gt;
    var infinite = new Waypoint.Infinite({
      element: $('.infinite-container')[0],
      onBeforePageLoad: function () {
      $('.loading').show();
      },
      onAfterPageLoad: function ($items) {
      $('.loading').hide();
      }
    });
  &lt;/script&gt;
  </code></pre>
  
  <p>These imports are in the base.html header:</p>
  
  <pre><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="{% static 'js/jquery.waypoints.min.js' %}"&gt;&lt;/script&gt;
  &lt;script src="{% static 'js/infinite.min.js' %}"&gt;&lt;/script&gt;
  </code></pre>