leandrowd / react-responsive-carousel

React.js Responsive Carousel (with Swipe)
http://leandrowd.github.io/react-responsive-carousel/
MIT License
2.67k stars 629 forks source link

Re-downloading each image on every scroll #558

Closed tylorkolbeck closed 3 years ago

tylorkolbeck commented 3 years ago

I am sorry if this doesn't make sense. Please let me know if the wording does not describe my issue well enough.

Every time the carousel scrolls it is making another network call for the images that I am using for the background of each "Card". Is there a setting to use the image that was already downloaded from the network if it scrolls back to a card that has already been shown? I am setting the background image using css.

This is one view with 3 cards that scrolls every 3 seconds to show another 3 cards. It does this 3 times before starting back over to the starting cards:

Screen Shot 2021-02-07 at 1 36 34 PM

The issue I see is if I have 3 cards for each "scroll" and it scrolls every 3 seconds with 3 different scroll views, then with 500,000 people viewing the page that would be 4,500,000 calls to my cloud front distribution every 3 seconds. If these 500,000 users left the page open all day you could see where the network calls would become ridiculous.

Here is a snapshot of my network calls:

Screen Shot 2021-02-07 at 1 30 11 PM

I am not sure if there is something built in to prevent this, if I am doing something wrong, or I am just overthinking it.

renancleyson-dev commented 3 years ago

I couldn't reproduce the issue. Maybe it isn't related to the carousel, but feel free to try to provide an example.

TheSohaibAhmed commented 3 years ago

I think this might be if you're making the api call within the carousel? This might be a sketch solution (or maybe you're doing this already), but have the images be stored somewhere and then use the carousel to show use them from that location?

stale[bot] commented 3 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.