Search code examples
htmlimage-preloaderlink-prefetch

How to Preload Images without Javascript?

On one of my HTML pages there are some large images that are shown when I mouse hover over some links and it takes time to load those images.

I don't want to use JavaScript to preload images. Are there any good solutions?

Solution

  • From http://snipplr.com/view/2122/css-image-preloader

    A low-tech but useful technique that uses only CSS. After placing the css in your stylesheet, insert this just below the body tag of your page: Whenever the images are referenced throughout your pages they will now be loaded from cache.

    #preloadedImages
{
    width: 0px;
    height: 0px;
    display: inline;
    background-image: url(path/to/image1.png);
    background-image: url(path/to/image2.png);
    background-image: url(path/to/image3.png);
    background-image: url(path/to/image4.png);
    background-image: url();

}