diTii.com Digital News Hub

Sign up with your email address to be the first to know about latest news and more.

I agree to have my personal information transfered to MailChimp (more information)

Apr232006

A Simple CSS Image preloading technique

So you need to pre-load images, but don’t want to deal with javascript or complicated workarounds. What do you do? The solution is simple. All we need to do is designate a CSS style with multiple background-images. As your browser reads the style, it will load each image you designate in succession, thus pre-loading your images. Below is an example of the CSS:

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

The next step is to load this div in your page. This is accomplished by inserting

once in the body of the page you are preloading these images. Now you can reference them anywhere on your page (rollovers, alternate image states, etc.), and the image will load instantly from cache.

Share This Story, Choose Your Platform!

Do NOT follow this link or you will be banned from the site!