Sometimes it is useful to pre-load your images so that when a certain element is needed, they’ll already be loaded for you and there wont be any delay or flickering.
When images are preloaded in the browser, the visitor can surf around your site and enjoy extremely faster loading times. This is especially beneficial for photo galleries and other image-heavy sites.
We preload the images using a off-screen div (margin-left:-10000px;) with background images.
The Source Code to copy/paste:
div.loader{
background:url(images/image1.gif) no-repeat;
background:url(images/image2.gif) no-repeat;
background:url(images/image3.gif) no-repeat;
margin-left:-10000px;
}
