My home page has three fixed background images which the page content scrolls over as the user goes down the page. You can see it using the link below to see what I mean. I’m wondering if the way i have implemented it is the most efficient way because I quite often see the wrong image for a given part of the page for a second before the correct one shows up. This happens particularly if the user is scrolling fast.
My implementation is a full-page image, in a floating group, with an image source that changes based on the current page scroll position. The only thing I can think to change is to maybe resize or compress the background images more but I dont think its that as I’d imagine my images are now cached on my browser. Its like there is a delay before the current page scroll position triggers the image change.