I'm building a simple container that displays a collection of GIFs, and I've encountered an unexpected behavior when trying to dynamically render GIFs based on the selected category. Here's a snippet of the code I'm working with:
{#each imagesByCategory[selectedCategoryIndex] as image (image.Key)}
<div>
<ImageElement src="cdn.digitaloceanspaces.com/{image.Key}" />
</div>
{/each}
So basically, it just reiterates and re-renders each image when the categoryIndex changes.
Initially it renders all images in the right order, from top to bottom, from 01.gif to 15.gif. However, when I switch to a different category, I can see in the Network tab the GIFs are being requested and loaded in the wrong order. For example, instead of loading them sequentially (e.g., 1.gif, 2.gif, 3.gif), they're loaded in reverse order (e.g., 32.gif, 31.gif, 30.gif).
The weird part is that during both the initial page load and when switching categoryIndexes, all the images are correctly displayed on the UI. However, when swicthing categoryIndexes and inspecting the Network tab, I noticed that the images are requested and loaded in reverse order (e.g., 32.gif, 31.gif, 30.gif). I also tried logging the indexes of each image as they're iterated through. Interestingly, during the initial page load, the indexes are logged in the correct order. However, when changing the [selectedCategoryIndex], while the images are rendered correctly, the logged indexes are in reverse order. Consequently, the user experience involves waiting for images to load from bottom to top instead of the intended top to bottom loading.
I'm relatively new to web development, so I might be overlooking something crucial here. The array that the loop iterates through is 100% structured correctly, so I'm a bit stumped as to what might be causing this issue.
Any insights on how to troubleshoot would be greatly appreciated!
Here is the screenshots to visualize the problem:
In general, I don't think is should be a problem that Svelte updates the #each "bottom up". Updating the HTML code all happens so fast so the user won't notice it, and it might even be that all changes to the HTML code are applied at once by the web browser, so it would be impossible for the user to notice it. But in your specific case, I imagine the problem could be web browsers' connection limitations, which I imagine allows them to only fetch 6 images in parallel (for most browsers). With small enough images and a high enough bandwidth, this will probably not be a problem, since the images will be loaded fast enough.
Are the images very big? Then try to reduce their size, and see if that makes it run fast enough.
Are the images already small? Then it would be desirable to change the load order of them, but I don't know if that's possible. It requires extra work on your behalf, but a solution could be to create low-resolution versions of the images, and first fetch all these, and after that fetch the real resolution versions of the images.
Hopefully you'll get a better solution by someone else ^^
EDIT
To optimize loading of images available at build time, see @sveltejs/enhanced-img.
