Image preload trick for javascript slideshows
Preventing Image Delay in a Slideshow
If you can write in html and css and have used images on a site and especially in a slideshow, you may have noticed an annoying delay in the display of the images. Well, I think I've discovered why and THE FIX .
It's actually quite easy.
I noticed that the only image in the slideshow that had no delay was the one used as an image(latest member's thumbnail) in another part of the page. This got me thinking.
I concluded that this image file was being cached but the others were still depending on server requests which takes longer and would account for the delay.
I decided to put all the images in the slideshow in a hidden cell in the page and see what happened.
Sure enough it worked first time! I was elated as I had got rid of the delay plaguing my slideshow.
Given that browsers are being built for speed and that images are notorious for slowing download times I concluded that these images are all now being cached by the browser.
Putting this another way, today's browsers try to keep cached copies to speed up download so it makes sense that I'd fixed the delay problem by creating a non-displaying cell containing the image files.
A working page can have span (<span>), div(div) or table cell(td) that has the id "hide" .Using css in the head you can define id "hide" as display:none.
That's it! It is that simple.
You'll see all the image files in the slideshow have been "preloaded" in this hidden span. They are not displayed in this section of the page but nevertheless they seem to still be cached by the browser resulting in my slideshow no longer having images with a delay.
Instead of server requests, the slideshow is now working off the cached image files - at least that's what I conclude has happened but all I really know is that it worked and that's what matters most so I'm sticking with my story!
Hope this helps any other web developers working with slideshow images.