How to Preload Images without Javascript?

user_88493 0
Viewed 67785

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?

link-prefetch image-preloader html
10 Answers

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

}
user_969660

There is no need to preload images. I can't understand why 99% people thinks, that hover effects have to use 2 images. There is no such need, and using 2 images makes it look bad. The only good solution I know is to use CSS for A elements (or easy JS for all other buttons). When button us hovered set background-position to some offset.

a { display:block; width:160px; height:26px; background:url(b_tagsdesc.png); }
a:hover { background-position:0 26px }

That's all, image used you can see below:

alt text
(source: margonem.pl)

Edit: You can also use it other way. Instead of toggling image, you can hide your image. So starting point would be "background-position:0 -100px" and on hover "0 0".

This technique is called CSS sprites - here is good description of it: http://css-tricks.com/css-sprites/

user_753280

You could use a hidden div to put images in. Like so

<html>
<body>
<div style="width:1px; height:1px; visibility:hidden; overflow:hidden">
    <img src="img1.jpg" /><img src="img2.jpg" />
</div>
<div>Some html</div>
</body>
</html>

This only works for images though, ie. if you're trying to do the same for say .swf files there will be problems. Firefox doesn't run the .swf file if it's not visible.

user_1001900

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

ScarletGarden_553510 
<link rel="preload" as="image" href="..." />

This works best for me when we want to load image early for CSS (while rel="prefetch" will cause duplicate loading from CSS)

user_48432470

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.

Darryl_Hein_54410

Can't you add them as an <img /> tag to your page and hide them using css?

user_835280
Related