When you open the location list view in a browser, the predefined number of items set to paginate_by in the view (that is, 10) is shown on the page. As you scroll down, an additional page's worth of items and the next pagination link are loaded automatically and appended to the item container. The pagination link uses the {% modify_query %} custom template tag from the Creating a template tag to modify request query parameters recipe in Chapter 5, Custom Template Filters and Tags to generate an adjusted URL based on the current one, but pointing to the correct next page number. If you have a slower connection speed, then when you scroll to the bottom of the page, you will see a page like the following until the items of the next page are loaded and attached to the list:

Scrolling down further, the second, third, and later pages of the items are loaded and attached at the bottom. This continues until there are no more pages left to load, which is signified by the lack of any further loaded pagination links in the final group.

We use the Cloudflare CDN URL to load the jScroll plugin here, but, if you opt to download a copy locally as a static file, then use a {% static %} lookup to add the script to the template.

Upon the initial page load, the element with the item-list CSS class, which contains the items and pagination links, will become a jScroll object through the code in the list.js. In fact, this implementation is generic enough that it could be used to enable continuous scrolling for any list display following a similar markup structure.

The following options are given to define its features:

• loadingHtml: This sets the markup that jScroll will inject at the end of the list while loading a new page of items. In our case, it is an animated loading indicator, and it is drawn from the HTML contained in a <script type="text/template" /> tag directly in the markup. By giving this type attribute, the browser will not try to execute it as it would a normal JavaScript, and the content inside remains invisible to the user.
• padding: When the scroll position of the page is within this distance of the end of the scrolling area, a new page should be loaded. Here, we've set it at 100 pixels.
• pagingSelector: A CSS selector that indicates which HTML elements in the object_list are pagination links. These will be hidden in browsers where the jScroll plugin activates so that the continuous scroll can take over the loading of additional pages, but users in other browsers will still be able to navigate by clicking on the pagination normally.
• nextSelector: This CSS selector finds the HTML element(s) from which to read the URL of the next page.
• contentSelector: Another CSS selector. This specifies which HTML elements should be extracted from the Ajax-loaded content and added to the container.

The rating.css inserts Unicode star characters and overlaps the outlines with filled-in versions to create the rating effect. Using a width equivalent to the rating value's percentage of the maximum (5, in this case), the filled-in stars cover the right amount of space on top of the hollow ones, allowing for decimal ratings. In the markup, there is an aria-label attribute with the rating information for people using screen readers.

Finally, the CSS in the style.css file uses CSS animations to create a rotating loading indicator.