davidjerleke
commented
2 years ago Hi @gsi-yoangainza,
Thank you for your question. I don’t have access to your setup, but it shouldn’t get slow.
What's happening is that when the carousel loads a large number of pictures, in IOS the transition becomes very slow.
How much is a large number of pictures? When I created the infinite scroll example on the documentation website, I tested it with hundreds of images and it didn’t stutter at all. It worked smoothly. I think I tested with over 200 images.
If you’re loading more than that in a horizontal carousel, I would suggest you to consider alternative ways of dealing with your content. For example, you can setup “infinite scroll” and load 200 images in chunks of let’s say 10 images at a time, as the user scrolls. And if the user scrolls to the end you can put a link at the end of the carousel that takes the user to a page with the content displayed vertically without a carousel.
As I mentioned, I don’t have access to your setup so there is a possibility that something in your setup is causing these performance problems.
Also, we added a zoom library and that make the transition even slower.
I have no control over how other libraries affect the performance or not. The only thing Embla does is to transform your container (translate3d), and if loop is enabled it flips slide positions to create the loop effect. It doesn’t touch the DOM in any other way. And if it gets slower when adding the zoom library, it’s a good hint that you probably should investigate the zoom library. I don’t think Embla should get the blame for this.
Kindly, David
gsi-yoangainza
Bug is related to
-Using embla-carousel with a large number of images on IOS (Safari, Chrome, Firefox)
Embla Carousel version
Describe the bug
Hi there!
I'm not sure if it's a bug or not, but the behavior of transitions between slides when scrollNext() is odd in my application.
I'm using the carousel to load several images of a gallery in a user profile. The loaded images are
<picture>tags with the<img>tags inside. Using react, we created the Picture component with the above structure: a<picture>tag that contains the<img>tag.What's happening is that when the carousel loads a large number of pictures, in IOS the transition becomes very slow. We have used lazy loading, to ensure that when we upload the first picture we already have other 30 in queue. When it loads less pictures still happens but less.
Also, we added a zoom library and that make the transition even slower.
This is a video showing the slowness with a bigger component and zoom functionality: https://user-images.githubusercontent.com/85452393/170327658-2174ee88-0a37-4767-bf22-6d764247488b.mp4
And this is the smaller component without zoom, which is much faster in the transitions, but sometimes it get slower (picture 22, for instance): https://user-images.githubusercontent.com/85452393/170340541-5de6da83-537b-449e-90fd-8accb9e70e51.mp4
The following image is showing the DOM when we scrolled through 28 pictures already, and that's why I think this shows -2800%, not sure if this it is normal behavior or not. When the lazy loading loads more pictures the number of elements increases.
I'm not sure if it is because we are loading the images the wrong way or it's some kind of conflict with IOS operating system. So I would appreciate some advice about it.
Thanks a lot in advance!