Introduction

So you want to preload images? There are two ways of doing this. The first is with Javascript, and you may be concerned that the user has Javascript turned off in his/her browser. The second alternative however, uses only CSS and (X)HTML, and I am going to show you the CSS (X)HTML way.

Where it can be used

Let's say you have a site that sells diamond necklaces, and you have now seen (from your control panel or any other source) that most users enter through your index/home page, and then they continue to the "products" page, and then they leave, this may be because they arrive on the products page and they have to wait for images to load and it takes too long, so what we'll do is, preload the images on the index/home page already, and when they arrive on the "products" page, the images are already loaded in the cache, or partially at least.

The CSS:

The CSS for this solution is very simple indeed, so simple, it only takes one line of code, and that line of code looks as follows:

img.hiddenpic{display:none}

Yes, that is all you need to add in your CSS file to preload images. So when you add an image with this class to your HTML the images will be loaded into the cache for future use, but they will not be displayed on the page because of the "display:none" that will hide the images from the user.

The (X)HTML

So here we are going to have a look at the code of our index/home page. We are already going to preload the images on this page, so that when the user browses to the "products" page, the images are already preloaded into the cache. This part should be placed right at the bottom of your page, just before the </body> tag, this way, all the other images on the page will load first and then the ones that need to be preloaded for the next page.

...
<img src='diamonds-1.jpg' alt='beautiful silver diamond necklace' class='hiddenpic' />
<img src='diamonds-2.jpg' alt='something special' class='hiddenpic' />
<img src='diamonds-3.jpg' alt='diamonds are a girl's best friend' class='hiddenpic' />
<img src='diamonds-4.jpg' alt='coming soon' class='hiddenpic' />
</body>

Conclusion

CSS gives a much better alternative for preloading images because it will always be rendered by the browser, where as Javascript could be turned off, and this code is much easier to implement than Javascript.

This page was published on It was last revised on

0

7 Comments

  • Votes
  • Oldest
  • Latest
BO
466 10
Commented
Updated

Awesome righteous_trespasser... I haven't thought about doing it this way. Why not do it inside a div?

add a comment
0
Commented
Updated

Yeah that could work aswell ... then just set that whole div to "display:none" ...

add a comment
0
Commented
Updated

That's a nice idea you've got there, but from an accessibility point of view, JavaScript might be better: if a browser doesn't support JavaScript, (or it's disabled) the images won't be preloaded - there aren't any side effects. On the other hand, if a browser doesn't support CSS, the user ends up seeing those images on the page, something we don't possibly want - the goal of XHTML/CSS is to make pages more accessible by separating the actual content from the formatting, so you should try to avoid adding stuff in HTML that isn't part of the page's actual content.

add a comment
0
Commented
Updated

...but if the browser doesn't support css, my whole website won't work at all?? all my styling is done in css....... I think most people's, these days. what browsers don't support css??

anyhow looks brilliant and simple R_T - I'll definitely give it a go with the botanical garden website. Thanks!!!!

add a comment
0
Commented
Updated

Let's say you have a site that sells diamond necklaces, and you have now seen (from your control panel or any other source) that most users enter through your index/home page, and then they continue to the "products" page, and then they leave, this may be because they arrive on the products page and they have to wait for images to load and it takes too long, so what we'll do is, preload the images on the index/home page already, and when they arrive on the "products" page, the images are already loaded in the cache, or partially at least.

If the users leave the products page because images are loading too slowly, and you instead place those images on the home page - wouldn't the same users just leave the site from the homepage?

Introducing code into a page that's never intended to be seen is semantically incorrect, and a better solution would be to optimize the images or split the page up into smaller pages if there are just too many images.

add a comment
0
Commented
Updated

Hi,
i am not aware of CSS. So please tell me how will i design a page with the help of CSS?

add a comment
0
Commented
Updated

Yeah that could work aswell ... then just set that whole div to "display:none" ...

Be careful with this. Browsers are getting pretty smart nowadays and there's a chance those images won't actually preload. Some browsers will see display: none and decide not to load anything within until that css changes (via media queries or some such).
See "Test Three" of this article for more details:

https://timkadlec.com/2012/04/media-query-asset-downloading-results/

Although the article uses css background images, it's actually quite similar results when using image tags.

add a comment
0