Now when user go to the bottom of the page it will load more. Let say 12 more.
So if user continue to scroll at some point it will load too much, for example more than 200 and it will become heavy for the browser.
So how to remove passed cards from DOM every time i load new items.
For example on page are loaded 36 cards. On next loading of new 12 cards, to be removed first 12. And so on. But this to not be like paginator which show this 36 items, than next 36 items…So new added, first removed from DOM etc.
I was testing some things this days and just changing start with same value as end will feel like paginator.
Closest thing that probably will work to me is if total number of items is for example > XX, cut X from start. Then allow againt to grow to XX and cut X again
I was checking how much RAM consumes Chrome tabs when you use Instagram, Facebook and Aliexpress.
Instagram:
If you scroll fast RAM usage goes to around 900MB
You stop and after 30 seconds it drop to around 750MB
When you go back fast to the begining it can go up to 1300MB but drop fast to 900MB. Also need time to show posts.
I didnt noticed changing in scroll bar so it looks like old post was not totally removed from DOM
Tested loading more than 200 posts
Facebook:
If you scroll fast RAM usage goes to around 950MB with less posts than Instagram.
You stop and after 40 seconds it drop to 480MB.
When you go back fast to the begining it can go up to 950MB but drop fast to 480MB.
Facebook is removing old posts. You can see this on scrollbar and also if you move back to the top, Facebook will load totally new posts.
Tested loading more than 200 posts(but it cut old constantly)
Aliexpress - Absolute winner
If you scroll fast RAM usage goes to around 550MB.
You stop and after 20 seconds it drop to 350MB.
When you go back fast to the begining it goes again to 550MB but drop fast to 350MB.
Aliexpress in not removing any product that you have load and when you go back fast to the top you dont notice any loading. Everything is there where you left it!
Tested loading more than 1000 products on main page!
Hi, as Joyce said, unless you remove the ones above which are no longer in view, it’ll fill up your memory quickly. The examples you referenced use Virtual Scrolling – it’s a pattern which gives the user an impression they’re scrolling through the page, but they’re actually stationary, just showing them a cutout of the scroll. https://medium.com/@sreekanthsreekanth970/virtual-scrolling-2797d722c6e2
I have try several approach with aim to make scrolling looks like scrolling(not as pagination), to not jump page when new products are loaded and and of course to keep memory as low as possible by keeping limited number of visible items on page, but with every approach i have at leas one problem.
Changing start offset every new load with + same value every next load. For example if you want to keep max 24 items on page, first start will be 0, end 24. Next load start will be 24 end 48 and so on. New load executed by page scroll Y % position and replacing all item in array that i have bind for Repeat items.
Problem. When you go over 70% of Y position and it load more, it replace all items, but you stay on position where you are so first of new items are up and not visible. Also if you go fast to the end it load new and new and new till last item.
Removing same number of items as i added. For example. On begining you load 48. Every next time load 24 at end, and remove 24 from begining. Different problems happens. Card jumps, scrollbar position stay over 70% and immediately react on next small scroll.
Not removing items till it not reach some number, than remove all till some limit. Example. First load 48. When scroll move over 70% load new 24. Next again 24 and again. Total number 120 items. If over 119 items, remove 48 so it have some window from 72 to 120 before remove. Problem: On removing, cards jump up and you need to go back to see this items.
Your example. Its look interesting and probably i will use dummy space technique, but will need to modify. If its like in tutorial that you sent me, if i am not wrong, you need to know total number of items so you can calculate total bottom dummy space, but it can be a lot, a lot items and i dont know is it good idea. About showing items. I have try like that. I have added bottom and top dummy space. On begining top 0, bottom = total items number * item height.
I made workflow on page scroll to watch Scroll position of bottom dummy space. When reach it to load new item, remove item height size from bottom and add to top dummy. It was promising at least for mobile but after deploy when you reach bottom dummy it start to load new, new, new all to the end. Also other thing that is problem is that if user move scroll bar very fast down it goes in empty dummy space and there is no items.
I have also tried with loader on component scroll position > 0 and < 20 for all of above but it always have some problem.
Thank you for idea with dummy. I will try to use it on some way.
