How to Preload Images without Javascript?

Question

In one of My Layout there are some large images (come from XML) which shown when I mouse hover on some some of the link, but when the Page loads and when i rollover It takes time to Load that Image.

Note: there are fix 5 images (not dynamic)

I dont want to use JavaScript to Preload Images any Solutions?

I am Not Using Hover menu or something like that, but this Images are Product Images and the links are Text link Got my Point??

Answer 1

Reference your images in invisible img tags. while page loading they will downloaded too.

Answer 2

If preloading images is what you seek, then performance is what you want. I doubt blocking up the page while the resources load is what you want. SO, just place some prefetching links at the end of the body and add the bogus media to them to make them appear unimportant (so that they get loaded after everything else). Then, add the onload tag to those links, and in that onload will be the code that sets the source of the actual resource in your page. For example, this could even be used in conjunction with dynamic iframes.

Before:

<a onclick="myFrame.style.opacity=1-myFrame.style.opacity;myFrame.src='http://jquery.com/'">
    Click here to toggle it
</a><br />
<iframe id="myFrame" src="" style="opacity: 0"></iframe>

After:

<a onclick="myFrame.style.opacity=1-myFrame.style.opacity">
    Click here to toggle it
</a><br />
<iframe id="myFrame" src="" style="opacity: 0"></iframe>
<link rel="prefetch" href="http://jquery.com/"
      onload="myFrame.src=this.href" media="bogus" />

Notice how the first one (before) freezes up the page and blinks in a quite ugly manner while the second one (after) with the content preloaded doesn't freeze up the page or blink, rather it appears and disappears seamlessly instantly.

Answer 3

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();

}

Answer 4

A technique I didn't see mentioned here yet, which works great if you don't need to worry about IE6 & 7, is to use the :after pseudo-selector to add your images as content to an element on the page. Code below lifted from this article:

body:after {
    content: url(img01.jpg) url(img02.jpg) url(img03.jpg);
    display: none;
}

The only downside I can see to this compared to using JavaScript to preload the images is that there is no easy way to release them from memory.

Answer 5

As I'm not sure if hidden images are loaded, you'll probably want to use image sprites. Then the entire image is loaded before anything is displayed. You can even put all of your menu items in one image and therefore save a lot of HTTP requests.

Answer 6

HTML5 has a new way to do this, by link prefetching.

<link rel="prefetch" href="http://davidwalsh.name/wp-content/themes/walshbook3/images/sprite.png" />

Just add many link tags as you need in your HTML and you are good to go. Of course, older browsers will not load the content this way.

UPDATE

If your server is served with HTTP2, you can also add a Link header in your response an make use of HTTP2 Server Push.

Link: <http://davidwalsh.name/wp-content/themes/walshbook3/images/sprite.png>; rel=preload; as=image;