f.haeder.net

"Infinite" scroll need overworking

When the small "addon" is enabled, more content is being loaded when users scroll down. So far so good. But if they scroll more down, more is being added to the DOM document which results in a growing browser procress and a slow-down due to the device has to handle more content.

I would prefer that the content in opposite scroll direction is being removed to allow smooth usage of the device (desktop PCs with low RAM will suffer greatly). If the user changes scroll direction, again content on the opposite direction is being removed.
browser bug friendica infinite-scroll slow-down
Maybe there is somewhere a #jquery #plugin around? Then we don't need to re-invent the wheel ...
Yesterday I had a look at the jquery plugins you mentioned. https://github.com/pixelcog/parallax.js is not about infinite scrolling. It is about to have a prallax effect. And https://github.com/fredwu/jquery-endless-scroll doesn't do that much more than our implementation already do (OK it can load previous pages).

The problem isn't to load next or previous pages through ajax. That would be very simple.

The problems we would have to deal with are:

  • which posts belong e.g. to page 1 (which should be removed from the screen when we scroll e.g from page 2 to page 3)
  • how do we deal with the situation when new posts arrive (e.g. the user would be on page 3 - a new post does arrive, and he/she scrolls to page 4 - I guess in this situation the first post of page 4 would be missing)
  • how do we deal with comments on posts (wich would move the post on top of the first place



The whole topic is very complex. I think this is not something which is easy to implement. I don't want to say that it is unsolvable, I just want to highlight that this "extended" infinite scrolling is more than just adding and removing content
Just using a request parameter, like "page" is not helpful, then you will may see duplicate posts as "page=2" will change when new posts are being added. #GNUSocial uses here something like "lastPostId" which is the id number of the last post that has been loaded and so displayed.

Maybe I better make an example on how I think how it can be done:

1) Load page and embed "last post id" directly into page
2) Send request out: "POST /ajax/network/?lastPostId=12345&page=current"
3) This returns the posts (lastPostId - postsPerPage) that just be displayed right away including a new lastPostId
4) The user scrolls up, send another request out: "POST /ajax/network/?lastPostId=12335&page=up" (I assumed 10 posts per page and again a new lastPostId is included)
5) On any of those requests, check that more can be loaded, if not, the new lastPostId should be empty, indicating that no more can beloaded
6) Similar when the user scrolls down, then &page=down is given

Maybe not perfect but newly added posts can be found out the same way:
"POST /ajax/network/?lastPostId=12345&page=up (as newer posts are added on top)

The JavaScript then needs to handle empty lastPostId (when < postsPerPage has been found) and removing/adding content.
Later posts Earlier posts