TUTORIAL: Preload images with CSS

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:

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.

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.

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

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

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.

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

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.