This is a Rosetta Code post.
You have a page on your website that displays data from the jsonplaceholder todos rest API. All 200 rows are displayed at once which is inefficient.
n results using infinite scrolling like a Facebook feed.
- Paginate using
_start(the page) and
_limit(the size) for each request.
- When the user scrolls to the bottom of the screen fetch the next
nresults auto-magically \ :D /
The user will have the experience of infinite scrolling which will save their data and reduce unnecessary requests.
Once the document loads fire the first
get, there after listen to the scroll event, use
checkpos to determine if the user is at the bottom of the screen, increment the
start variable and
get the next page.
Repeat this until the known
max is reached.
let start = 0;
- This will only fire when the user scrolls right to the bottom, a percentage of 95 could be used instead however the scroll event will need tweaking.
checkposis already doing a percentage calculation with this in mind
- If the initial
getreturns less data than that which causes the y-axis scroll to display, the scroll listener will never fire
- The API’s used in
checkposmay not work in all browsers ¯\(ツ)/¯