How to Preload Images without Javascript?

Question

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?

@tharkun how is this a duplicate. Those are "with"; this is "without". — Darryl Hein
– Darryl Hein, Commented May 4, 2009 at 9:17

Nikita Fedyashev · Accepted Answer · 2022-05-12 11:10:00Z

80

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 as 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.

Note Above code will not work for Apple Safari safari does not support prefetch til now version 12 https://caniuse.com/#search=prefetch

UPDATE

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

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

edited May 12, 2022 at 11:10

Nikita Fedyashev

19.3k15 gold badges58 silver badges110 bronze badges

answered Sep 16, 2013 at 17:55

Luis Dalmolin

3,5162 gold badges21 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

stallingOne Over a year ago

img is still reloaded afterwards (a second time) by css

Baraka Over a year ago

Depending on the page design and how it will be used rel="preload" might be a better option than rel="prefetch"

Neek Over a year ago

I know your answer was from 2013 but, at least today, prefetch is for preloading resources that may be required on a later page, see developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/… "...user is likely to need the target resource for future navigations" and "in general browsers will give prefetch resources a lower priority than preload ones". I'm not clear on the exact different, but preload is probably a better one to use today in 2024, as in Andrey's answer from 2021 below. ref: developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/…

Khurram Aziz · Accepted Answer · 2009-05-04 11:56:53Z

38

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

}

answered May 4, 2009 at 11:56

Khurram Aziz

1,5065 gold badges15 silver badges24 bronze badges

3 Comments

Wasim Shaikh Over a year ago

Thanks a Lot AZIZ. This is really Good solution for the Preload. Still Hoping for more solutions. Then close the Answer,

vsync Over a year ago

this MOST DEFINITLY does not work. only the last empty url() is parsed.

Jokus Over a year ago

That doesn't work as @vsync already wrote. But you may put all images in one background property: background-image: url(path/to/image1.png), background-image: url(path/to/image2.png),url(path/to/image3.png), url(path/to/image4.png);

Glorfindel · Accepted Answer · 2019-03-14 17:02:14Z

27

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:

_{(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/

edited Mar 14, 2019 at 17:02

Glorfindel

22.8k13 gold badges97 silver badges124 bronze badges

answered May 4, 2009 at 9:12

Thinker

14.5k9 gold badges42 silver badges56 bronze badges

5 Comments

Andrew Hedges Over a year ago

Sprites are great, but there are cases where you need to preload images.

Timofey Drozhzhin Over a year ago

Sprites work great for abrupt transitions, but fail to fade with gradual transitions.

Bradmage Over a year ago

Preloading is also useful for animations. Like an ajax loading image.

Rhys van der Waerden Over a year ago

"There is no need to preload images." This is just rubbish. What if you're timing how long a user views an image? Or you're playing a game and you want all your assets to be loaded up before you render the scene?

user7892745 Over a year ago

There is a slightly faster solution (check my answer below). However, it is a bit more complicated. So, if you are just looking for a simple quick n' dirty way to improve the speed then you should use this way.

Matti Lyra · Accepted Answer · 2009-05-04 10:05:51Z

15

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.

edited May 4, 2009 at 10:05

answered May 4, 2009 at 9:03

Matti Lyra

13.1k8 gold badges53 silver badges67 bronze badges

3 Comments

Darryl Hein Over a year ago

Would you also not need display:none since visibility will still take up space? But I also believe that some browsers don't load hidden images till they are shown.

Wasim Shaikh Over a year ago

This is really Good Solution , we can also Use position absolute and ; height:0 in CSS, Isnt it?

Svish Over a year ago

If it isn't loaded when hidden, maybe it would help have some "visible" span/div of height 0 with style="background:url(imgx.jpg)"? Just an idea... don't know if it helps or works :p

Andrew Hedges · Accepted Answer · 2012-07-08 18:15:19Z

15

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.

edited Jul 8, 2012 at 18:15

answered Jul 8, 2012 at 18:01

Andrew Hedges

21.9k16 gold badges71 silver badges79 bronze badges

2 Comments

Cristian Vrabie Over a year ago

While this mostly works, some browsers (for example Opera) will not download images for display:none elements. quirksmode.org/css/displayimg.html

Cristian Vrabie Over a year ago

You could however include it without display none but position it outside the drawn area: background-position: -100px -100px;.

Andrey Chesnakov · Accepted Answer · 2021-07-05 14:52:56Z

12

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

answered Jul 5, 2021 at 14:52

Andrey Chesnakov

1701 silver badge5 bronze badges

Comments

score 4 · Accepted Answer · 2017-04-22 00:34:31Z

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.

Canavar · Accepted Answer · 2009-05-04 09:00:28Z

3

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

answered May 4, 2009 at 9:00

Canavar

48.1k17 gold badges94 silver badges126 bronze badges

Comments

Darryl Hein · Accepted Answer · 2009-05-04 09:20:44Z

2

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.

answered May 4, 2009 at 9:20

Darryl Hein

145k96 gold badges224 silver badges265 bronze badges

Comments

Peter · Accepted Answer · 2009-05-04 09:01:16Z

1

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

answered May 4, 2009 at 9:01

Peter

14.6k15 gold badges73 silver badges112 bronze badges

1 Comment

user7892745 Over a year ago

= lag (in some browsers)

Collectives™ on Stack Overflow

How to Preload Images without Javascript?

10 Answers 10

3 Comments

3 Comments

5 Comments

3 Comments

2 Comments

Comments

Before:

After:

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

3 Comments

3 Comments

5 Comments

3 Comments

2 Comments

Comments

Before:

After:

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related