Why register for free on WebRadiance? |
 |
Welcome to WebRadiance forums! WebRadiance is a place for discussion and help on a large range of web design and development related topics such as HTML, CSS, ASP & .NET, PHP and SEO. It is provided for free, without ads and is a friendly place for beginners and professionals alike. By joining us today you can take part in our rapidly growing community. Registering enables you to:
|
Preloading images with CSS
  |
 Preloading images with CSS, |
  Nov 7 2006, 09:03 AM
Post
#1
|
|
 W.R. General  Group: Administrators Posts: 2,833 Joined: 4-April 06 From: Massachusetts - USA Member No.: 5  |
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: CODE #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. -------------------- |
 |
 
|
|
Nov 7 2006, 10:55 AM
Post
#2
|
|
 Argh!  Group: Members Posts: 449 Joined: 3-August 06 From: Texas Member No.: 37 |
Dude, that is sexah. Thanks!
-------------------- Its not girly, its web 2.0!
|
|
|
|
|
Nov 7 2006, 10:57 AM
Post
#3
|
|
|
W.R. General Group: Administrators Posts: 2,833 Joined: 4-April 06 From: Massachusetts - USA Member No.: 5 |
QUOTE(moojoo @ Nov 7 2006, 10:55 AM)  Dude, that is sexah. Thanks! Your satisfaction increases my ego; thank you. 
-------------------- |
|
|
|
|
Nov 7 2006, 11:05 AM
Post
#4
|
|
 SEO Specialist  Group: Members Posts: 234 Joined: 13-October 06 From: Gloucestershire, UK Member No.: 86 |
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? |
|
|
|
|
Nov 10 2006, 06:50 AM
Post
#5
|
|
 Loose bits sink chips Group: Administrators Posts: 2,101 Joined: 4-April 06 From: Kent, UK Member No.: 2 |
QUOTE(wgardner @ Nov 7 2006, 04:05 PM) 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 |
|
|
|
|
Nov 22 2006, 11:21 PM
Post
#6
|
|
 Allegedly Legendary  Group: Members Posts: 517 Joined: 31-July 06 From: Winder, GA Member No.: 11 |
That looks pretty sweet. Have you used it much?
-------------------- |
|
|
|
|
Nov 23 2006, 01:11 AM
Post
#7
|
|
|
W.R. General Group: Administrators Posts: 2,833 Joined: 4-April 06 From: Massachusetts - USA Member No.: 5 |
QUOTE(TJSingleton @ Nov 22 2006, 11:21 PM) 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. -------------------- |
|
|
|
|
Jan 9 2007, 03:29 AM
Post
#8
|
|
 W.R. Sergeant Group: Members Posts: 204 Joined: 7-January 07 From: Las Vegas Member No.: 350 |
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.
CODE #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.
|
|
|
|
|
Jan 9 2007, 10:40 AM
Post
#9
|
|
 Allegedly Legendary  Group: Staff Posts: 834 Joined: 26-July 06 From: Fort Wayne, Indiana Member No.: 7 |
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: Jan 9 2007, 10:41 AM -------------------- Writings about everything related to your web design business.
My Unique Web Design and Development Company. |
|
|
|
|
Jan 9 2007, 07:23 PM
Post
#10
|
|
|
W.R. Sergeant Group: Members Posts: 204 Joined: 7-January 07 From: Las Vegas Member No.: 350 |
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.
|
|
|
|
|
Jan 9 2007, 11:10 PM
Post
#11
|
|
|
Allegedly Legendary Group: Staff Posts: 834 Joined: 26-July 06 From: Fort Wayne, Indiana Member No.: 7 |
QUOTE(Ryan Fait @ Jan 9 2007, 07:23 PM) 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. -------------------- Writings about everything related to your web design business.
My Unique Web Design and Development Company. |
|
|
|
|
Tags
No Tag inserted yet
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
|
Lo-Fi Version | Time is now: 3rd July 2009 - 12:35 AM |