I am working on a shop app, it contains a list of products and when you click on one it displays a slideshow.
The slideshow works by hiding every image that isn't the currently viewed one via display:none;. So you only ever see one image at a time unless they are transitioning (sliding in and out of place).
The issue I'm running into is that react won't seem to load my image unless it is visible. So when you first try to sift through the slideshow it has to load every single image until it's made a full round.
Is there a way to ensure that React will load them at render? I have tried setting every image opacity to 0 for a brief moment to give them all time to load but that still won't load them. Only if they are actually visible on screen.
Instead of "at render", the actual situation is that they(<img> tags or background-image properties) are not rendered. Either display: none / opacity: 0 will be considered "not rendered", thus images will not be loaded.
This question is more related to HTML than React.
To solve this, TIMTOWTDI.
One way is to wrap these pictures in a <div> tag which has the stylesheet set to overflow: hidden. The images are rendered in DOM but invisible to user. This way works easy and well with slides of fewer and smaller pictures.
Another way is to use JavaScript and AJAX to load the pictures with code and display it at your wish. The code can totally control everything. An example is on MDN - Using Fetch. This way works better if you have more or bigger pictures since you can prevent huge simultaneous loading.