Jquery，Django，Infinite Scroll在加载页面后加载其余元素

Question

I was able to implement infinite scrolling into my Django website's home page following this guide: https://simpleisbetterthancomplex.com/tutorial/2017/03/13/how-to-create-infinite-scroll-with-django.html

Basically the Jquery code that triggers the infinite scroll is this (plus some django code):

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

This is good because I load the page pretty quickly and the user is then able to infinite scroll as the other elements load. What I want to achieve now is to load the page like I do now and immediately after, without the need of scrolling down, I want to load the rest of the elements. So basically load the page with the first few elements and then load all the remaining elements without having to scroll. Note that I have used the above guide's implementation as it is a convenient way of being able to use all of Django's power (especially related to foreign keys), so I am trying to stick to this approach.

Is there a way to do so changing the what the Jquery is triggered only?

Thanks, Vittorio

Answer 1

Waypoint.Infinite is a lib you should be reading docs for. Assuming loading is triggered on reaching bottom, you can just scroll to bottom with Jquery on page load.

$('html, body').scrollTop($(document).height());