Open arjunmenon opened 6 years ago
jedrzejchalubek
commented
6 years ago The fade jump will require too many changes. For now, I think to go with the option to prevent rewinding proposed here: #219. Not the best solution but, currently only way we can address this problem.
I will do some performance tests to see if how we can address this somehow. Gonna mark this as improvement as this probably requires to go to a major release.
arjunmenon
commented
6 years ago One interesting way to do this would be through virtualization. All elements are loaded but what is finally rendered is based off browser size.
If carousel has 100 images and the browser can only display 3 images at a time, rest would only be rendered when the user actually moves through the carousel, each, 3 at a time.
At no point does the browser has to handle more than 3, more than what it can show based-off of its size.
This is not lazy loading since, data is all loaded, only the DOM is created for those subsequent 3 images, not for others, as and when user scrolls. Building the DOM is where the issue is. It can be avoided this way.
A nice readup from where I learned about it was from here - https://www.ag-grid.com/ag-grid-8-performance-hacks-for-javascript/
Hope you will look into it.
Hey For eg. there are 10 slides and the general direction for scrolling is to the right using the right button. But if the first slide is scrolled in the opposite direction, ie, the left button is pressed, it will rewind to the last. This is good UX.
But the problem arises if there are more than multiple, like 50. Since all of them are created in the DOM, this introduces significant lagging issues, it has to scroll through all of those, 50 items, to get to the last.
How can we stop this behaviour? Better would be to fade and jump to the last 45 and then scroll through to the remaining 5.