Jump to content

Preloading images with CSS

Whether you're a seasoned veteran or a struggling beginner, Web Radiance is the web development and web design forum for you. You'll find answers to all your HTML, CSS, SEO, and Programming needs. Pull up a chair and stay awhile.

Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

Preloading images with CSS Rate Topic: -----

#1 User is offline   marcamos 

  • W.R. General
  • Group: Administrators
  • Posts: 2,849
  • Joined: 04-April 06
  • Gender:Male
  • Location:Massachusetts - USA

Post icon  Posted 07 November 2006 - 09:03 AM

To compliment Catalyst's recent post in the Javascript forum about pre-loading images, I thought I'd add my own method; Pre-loading images with CSS.

1. Put something like this in your CSS file:
#preloadedImages {
	   width: 0;
	   height: 0;
	   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);
}

…changing, of course, the quantity of images and the paths to them. This makes certain the mentioned images are loaded into your cache as the browser goes through your CSS file.

2. Then, simply load a <div> element with your ID high up in the (x)html page (directly under the opening <body> tag is recommended), and viola! For example:

<div id="preloadedImages"></div>

Note: This <div> doesn't need to contain anything, or do anything more than I've already written. To use your pre-loaded images, simply call them into your code as you would normally. The above trick simply gets them loaded into your browser's cache long before you call them in your code.
0

#2 User is offline   moojoo 

  • Argh!
  • Group: Members
  • Posts: 449
  • Joined: 03-August 06
  • Location:Texas

Posted 07 November 2006 - 10:55 AM

Dude, that is sexah. Thanks!
Its not girly, its web 2.0!
0

#3 User is offline   marcamos 

  • W.R. General
  • Group: Administrators
  • Posts: 2,849
  • Joined: 04-April 06
  • Gender:Male
  • Location:Massachusetts - USA

Posted 07 November 2006 - 10:57 AM

View Postmoojoo, on Nov 7 2006, 10:55 AM, said:

Dude, that is sexah. Thanks!

Your satisfaction increases my ego; thank you. :lol:
0

#4 User is offline   william 

  • SEO Specialist
  • Group: Members
  • Posts: 233
  • Joined: 13-October 06
  • Gender:Male
  • Location:Gloucestershire, UK
  • Interests:SEO, Web Design, PHP Development, Wordpress, Fireworks, Photoshop, EpiServer

Posted 07 November 2006 - 11:05 AM

Nice stuff thanks.

Can I just ask, what kind of problems come up if you are not using this? Am I right in thinking it's a method that prevents elements clunking around the screen as the images load up?
0

#5 User is offline   Karl Buckland 

  • A.K.A. Sirkent
  • Group: Administrators
  • Posts: 2,145
  • Joined: 04-April 06
  • Gender:Male
  • Location:Kent, UK

Posted 10 November 2006 - 06:50 AM

View Postwgardner, on Nov 7 2006, 04:05 PM, said:

Can I just ask, what kind of problems come up if you are not using this? Am I right in thinking it's a method that prevents elements clunking around the screen as the images load up?


Well, there's quite a few reasons you might want to preload images. The most common are that they're used in some sort of rollover effect, or a slideshow of some sort.
QUOTE(benbramz @ Aug 17 2007, 07:44 AM) Ive noticed that quite a few people are now adding quotes from the board into their signature. I think its started an new web-radiance craze.. :P
0

#6 User is offline   TJSingleton 

  • Allegedly Legendary
  • Group: Members
  • Posts: 517
  • Joined: 31-July 06
  • Location:Winder, GA

Posted 22 November 2006 - 11:21 PM

That looks pretty sweet. Have you used it much?
Unique Web Design and Development
0

#7 User is offline   marcamos 

  • W.R. General
  • Group: Administrators
  • Posts: 2,849
  • Joined: 04-April 06
  • Gender:Male
  • Location:Massachusetts - USA

Posted 23 November 2006 - 01:11 AM

View PostTJSingleton, on Nov 22 2006, 11:21 PM, said:

That looks pretty sweet. Have you used it much?

Only in cases where a CSS rollover needed to download a large-ish file. It works like a charm.
0

#8 User is offline   Ryan Fait 

  • W.R. Sergeant
  • Group: Members
  • Posts: 204
  • Joined: 07-January 07
  • Location:Las Vegas

Posted 09 January 2007 - 03:29 AM

I personally like the background switch method for rollovers. Use a single image with the off state stacked on top of the hover state. Set the size of the div, then use this to flip it. No preload and no flicker.

#nav a {
	width: 120px;
	height: 24px;
	background: #fff url("navbar.gif") no-repeat 0 0;
	display: block;
}
#nav a:hover {
	background-position: 0 100%;
}

The commercial front for my freelance web design company.
0

#9 User is offline   James Mitchell 

  • Legendary
  • Group: Administrators
  • Posts: 922
  • Joined: 26-July 06
  • Gender:Male
  • Location:Fort Wayne, IN

Posted 09 January 2007 - 10:40 AM

I will do this if I am preloading many large images for other pages, but for navigational elements I use the following methods (simliar to you):You'll see the post about this in the XHTML forum.

This post has been edited by JPMitchell: 09 January 2007 - 10:41 AM

Posted Image
0

#10 User is offline   Ryan Fait 

  • W.R. Sergeant
  • Group: Members
  • Posts: 204
  • Joined: 07-January 07
  • Location:Las Vegas

Posted 09 January 2007 - 07:23 PM

I haven't seen the sliding doors one before, nice link! I've used that matrix one once before, but it's really a pain to set up and even more of a pain to edit. You also lose the functionality of margins, borders and other useful things.
The commercial front for my freelance web design company.
0

#11 User is offline   James Mitchell 

  • Legendary
  • Group: Administrators
  • Posts: 922
  • Joined: 26-July 06
  • Gender:Male
  • Location:Fort Wayne, IN

Posted 09 January 2007 - 11:10 PM

View PostRyan Fait, on Jan 9 2007, 07:23 PM, said:

You also lose the functionality of margins, borders and other useful things.

Often times that is the case. That's the beauty of so many different, clean, and simple methods.
Posted Image
0

#12 User is offline   lwaxhaxnc 

  • W.R. Private
  • Group: Members
  • Posts: 14
  • Joined: 24-September 11

Posted 24 September 2011 - 01:18 PM

Use a single image with the off state stacked on top of the hover state. Set the size of the div, then use this to flip it. No preload and no flicker. :)
Locksmith Waxhaw NC
0

Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users