Archived topic
CSS preloading of images.
5 replies · Started by Anonymous on February 17, 2016
Hi Tom,
This is related to my previous Make images flush with center column
There's the typical lag associated with loading of rollovers.
Once the images are in the browser cache there's no flicker.
Attempts to add a preloader script has only broken the rollovers contained within the 3 columns.
Is there a lightweight preloader plugin that works well with GP or of a snippet that would work within the lightweight grid plugin?
Thanks,
Mo
One way is to load the images in your source somewhere but keep them hidden/off screen with CSS.
This will load them before the user hovers over them.
The best way is to use CSS background sprites, so it's one image just switching positions.
Hi Tom,
I've seen articles about the hidden off screen images but so far applying the CSS that's been offered by the various authors has not been successful.
The background sprites approach might be more appropriate.
I'll keep searching around.
Thanks,
Mo
Background sprites are definitely the way to go :)
Hi Tom,
After messing about with different tutorials, I finally got a sprite to work.
Should be able to build the rest.
Thanks again for your feedback.
Mo
No problem :)