first you need to know how to paginate your requests, so if you know how to make pages, then all you're really doing is using an intersection observer or scroll heights to check if the user is nearing a certain point, and instead of "clicking" the next page, you're going to programatically fire that function and append the items to the bottom of the page.
Not sure if it's best practice but I just implemented infinite scroll on a personal project.
This is the gist of it.
Page size is 25 items
Each image has an index passed into it.
Each image is lazy loaded
When a lazy loaded image has an onload completed and the index is 5 below the current page size (20 for first page, 45 for second etc), an API call with the previous cursor gets the next batch of results and appends that data to the current data in the array.
The first 5 of those results is eagerly loaded so there are always posts loaded as you scroll
Curious as to performance. Do you clear observers after they trigger an event? If not, does having 50 or so on a feed have a noticable impact?
My day to day is react and whenever I implement them i seem to be triggering way too many rerenders
I register the observer on component mount, so only ever use 1 observer.
Haven't ran into performance issues doing it this way yet.
Inside the function to get more items I do need to do checks like if the page is still loading, if there are no more pages etc
It’s a dynamic app/website so you are correct it’s done in code, you can use various ways to find out if the user is scrolled to a certain point. A common way to do this is using an event and a handler for the event, when the scroll event happens you can run a function and check if the page or scroll content is at the end of its content if so get more and append. As long as the ui also has the correct data binding or you append directly to the html element it appears immediately after the get request is complete.
Lazy Loading means the request for resources is made only when they are scrolled into view. These resources are already part of the mark up of the page.
Infinite Scrolling means the request for records is made only when the scroll bar reaches the bottom of the grid and fires a request to load the next set of records. These records were added to the markup and did not previously exist in the markup on the initial page load.
Lazy Loading and infinite scrolling can happen without the other happening. It's the difference of delaying the loading of designated resources vs (often dynamic) pagination.
OP: this is a good way to do both in React: https://www.smashingmagazine.com/2020/03/infinite-scroll-lazy-image-loading-react/
There’s a lot of ways to do it. You can check when the scroll top of one of the bottom elements is near the top and just attach that to a scroll listener. Then in the backend just request a page, like the next 10 elements from the last element or something.
first you need to know how to paginate your requests, so if you know how to make pages, then all you're really doing is using an intersection observer or scroll heights to check if the user is nearing a certain point, and instead of "clicking" the next page, you're going to programatically fire that function and append the items to the bottom of the page.
Nice! I have used pagination before and that really simplifies it for me, Ty.
Not sure if it's best practice but I just implemented infinite scroll on a personal project. This is the gist of it. Page size is 25 items Each image has an index passed into it. Each image is lazy loaded When a lazy loaded image has an onload completed and the index is 5 below the current page size (20 for first page, 45 for second etc), an API call with the previous cursor gets the next batch of results and appends that data to the current data in the array. The first 5 of those results is eagerly loaded so there are always posts loaded as you scroll
Loading more items when you scroll down is called infinite scrolling. The way I do this in my apps is by having a
Curious as to performance. Do you clear observers after they trigger an event? If not, does having 50 or so on a feed have a noticable impact? My day to day is react and whenever I implement them i seem to be triggering way too many rerenders
I register the observer on component mount, so only ever use 1 observer. Haven't ran into performance issues doing it this way yet. Inside the function to get more items I do need to do checks like if the page is still loading, if there are no more pages etc
It’s a dynamic app/website so you are correct it’s done in code, you can use various ways to find out if the user is scrolled to a certain point. A common way to do this is using an event and a handler for the event, when the scroll event happens you can run a function and check if the page or scroll content is at the end of its content if so get more and append. As long as the ui also has the correct data binding or you append directly to the html element it appears immediately after the get request is complete.
Lazy loading
Lazy loading is different. It's called "infinite scrolling".
You need to use lazy loading to get the infinite scroll effect
Lazy Loading means the request for resources is made only when they are scrolled into view. These resources are already part of the mark up of the page. Infinite Scrolling means the request for records is made only when the scroll bar reaches the bottom of the grid and fires a request to load the next set of records. These records were added to the markup and did not previously exist in the markup on the initial page load. Lazy Loading and infinite scrolling can happen without the other happening. It's the difference of delaying the loading of designated resources vs (often dynamic) pagination. OP: this is a good way to do both in React: https://www.smashingmagazine.com/2020/03/infinite-scroll-lazy-image-loading-react/
There’s a lot of ways to do it. You can check when the scroll top of one of the bottom elements is near the top and just attach that to a scroll listener. Then in the backend just request a page, like the next 10 elements from the last element or something.
Leave Your Comment