I understand that images should automatically preload on Unbounce, but I wondered how exactly this process works, and whether we can preload images not shown on page load?
For context, I’ve been diving into working with images lately, primarily swapping the src via a click event listener. I’ve figured out that to do this I have to:
-
- Change the src
-
- Change the srcset
Which to do dynamically (for images of different sizes), requires some work arounds, such as storing the actual size parameters of the element as data attributes etc. Which could be a whole 'nother topic itself…
With all this in place and some optimisation later I found that the click events handling the src swap were quite slow first time around and faster after all combinations had been achieved. From best I can gather from the network tab of the dev tools this was due to the initial clicks requiring fetch requests for the images which were later cached. Presumably this happened because of the size difference from the original image to its new destination.
So although my image exists and is preloaded on the page in a particular size, when I swap a larger img src with it, it needs to do another request, thus adding a noticeable delay to the image swap.
I tried loading and hiding the images at the desired size hoping this would allow for preloading but saw no difference in performance. I also tried automatically cycling clicks through the elements of load to have the images cached, but no luck. Any ideas how to eliminate this delay in image src swapping?
P.S. In the past I’ve simply hidden and shown overlaid images, but not only does this have issues with bloating the page, but also means a heck of a lot of code to cover every possible case statement!