>
 


Preloading Images Using CSS

September 11, 2009 by blogging developer



Preloading images decreases page load time and enhance user experience. In the previous articles: Image Preloading with Javascript and Image Preloading with jQuery, we focused on techniques to preload images using Javascript.

In this post, I would like to focus on another image preload technique using CSS. And on another post, I compared two image preloading techniques to understand advantages and disadvantages of both method - Preloading Images: Javascript or CSS – Comparing the techniques

Image preloading with CSS can be achieved by a simple <div> with style “display:none;” containing all <img> tags of images to be preloaded. 

<div style="display:none;">
   <img src="/images/imageA.jpg" >
   <img src="/images/imageB.jpg" >
</div>

The CSS preloading code must be in the BODY area of the HTML code. It will not work in the HEAD section. The optimum position depends on how the preloaded images will be used. If the images will be used sometime after the web page has finished loading, the preload <div> can be placed below the page content. If the images will be used immediately, such as automatic background image change, the preload <div> should be placed on the top section of the BODY area.

Want automatic updates? Subscribe to our RSS feed or
Get Email Updates sent directly to your inbox!

Currently rated 3.7 by 3 people

  • Currently 3.666667/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5


Comments

September 14. 2009 14:33

How can I pre-load images for a mobile phone website? (e.g http://m.youtube.com/)

chris | Reply

September 14. 2009 16:03

I believe technique described in the article works on mobile sites. You can use hidden divs for preloading.

Blogging Developer | Reply

September 27. 2009 20:47

Pingback from millionaire.websitesuperhero.com

Preloading Images Using CSS

millionaire.websitesuperhero.com | Reply

October 3. 2009 13:51

Pingback from jewelkuri.wordpress.com

Preloading Images Using CSS  « Jewelkuri’s Weblog

jewelkuri.wordpress.com | Reply

October 22. 2009 10:52

Interesting take on preloading. How well does it perform when compared to css sprite sheets?

Karl Agius | Reply

October 22. 2009 14:14

Social comments and analytics for this post

This post was mentioned on Twitter by nuwansh: Preloading Images Using CSS  http://bit.ly/2hZ58S

uberVU - social comments | Reply

October 23. 2009 11:59

Well, i think that isnt the best way to preload images with css, because it could be that the InternetExplorer ( like 6) isnt loading elements wich are hidden with display:none. I think, a better way would be to set the
style to :  position: absolute; left: -1000em;

so the images are in the content, but without using space, and want be seen, too, because is outside the browser view.
  

DKl3in | Reply

October 27. 2009 12:00

Some browsers, namely Firefox, do not load images, unless they are visible by the user (i.e., are currently inside the user's viewport)

Anton | Reply

October 29. 2009 12:26

Great idea! Moreover, it is JS free and cross browser.

WebDev | Reply

Add comment




(Will not be displayed!)




biuquote