I would like to define the order in which the images on a page are loaded, is this possible?
I am working on a client portfolio in which I will have my clients’ logos on a background…
I’m testing how the site works on different devices and I’ve noticed that when the device connection is slow, the images appear one by one in a disordered manner. I would like to order the way these images are loaded, for example, background and then the logos from left to right so that it looks nicer.
The order in which files are loaded on a page is primarily determined by the HTML structure - essentially, the order in which images are placed on a page. Other factors can also affect the load order, for example, the use of CSS positioning, Semantic Markup, Javascript, media queries, lazy loading etc. These are topics that are not really Sparkle related, and would require a degree of custom coding. The general advice is to keep image sizes fairly constant (in terms kb) and place them in the correct order on the page.
Yes, much larger images will load more slowly and a bit later.
You can also try the feature that makes them appear as you scroll down the page.
Hi @Chicago_Monkey_Man, what @francbrowne and @macmancape said definitely help form a mental picture of what’s going on.
More technically when presented with many images (or in general assets) to load from the server, the browser will establish a number of connections to the server to download them. But too many connections would hog the browser bandwidth, so it’s more like a fixed number of connections, and each asset is scheduled for download in one of the connections. This makes the download a bit unpredictable because depending on how large the assets are in each connection, one might end up loading out of order compared to what you might have in mind.
What you might try doing to ensure the effect is pleasing is to keep the background image size at a minimum, or perhaps ditch it entirely in favor of a solid color or gradient, then add a scroll animation to all images, with a time delay that increases by 0.1 or 0.05 seconds across all images.
One trick that could help with the images not yet being loaded, i.e. to mitigate the random order of appearance, is the first image could have a time delay not of 0, but of 0.5 or 1 seconds, to give the browser time to load as many images as possible. With small enough images a normal browser on a normal connection would have time to download them all, while on a slower connection the staggered animation effect would be lost but the images would still appear when they’re loaded (the animation would animate an invisible empty image frame).
Hope this helps.