preloading image

  • Drake
  • Beginner
  • Beginner
  • User avatar
  • Posts: 47
  • Loc: Canada

Post 3+ Months Ago

I have a SPAN element with a background image (defined in CSS). It changes the background image when you hover on the SPAN. Problem is that it on the first hover, it's blank for an instant since it only then begins to download the image.

How can I make it so that it preloads the image? I am using an external CSS file by the way.
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2194
  • Loc: Canada

Post 3+ Months Ago

The way I do all my mouseovers now is pretty much close to this:
http://wellstyled.com/css-nopreload-rollovers.html
http://www.alistapart.com/articles/sprites (demo)

Other than that, you can use javascript, or have somewhere in your page reference the image as well - preferably somewhere hidden or otherwise not noticeable (ex 1x1 pixel).
  • Drake
  • Beginner
  • Beginner
  • User avatar
  • Posts: 47
  • Loc: Canada

Post 3+ Months Ago

Hmm,

So if I put in a 1x1 SPAN or something onto the index page only (so just the main/intro page) with the background set as the rollover image, it should work, right?

Quick fix is all I need. I need to submit this project ASAP.
  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2194
  • Loc: Canada

Post 3+ Months Ago

Yeah, that should work. Try and position it so the image matches in with the background using background-position: x y; if you can :)

Otherwise they shouldn't care too much about a 1px dot.
  • Drake
  • Beginner
  • Beginner
  • User avatar
  • Posts: 47
  • Loc: Canada

Post 3+ Months Ago

Well, the image is a GIF anyway, so a good half of it is transparent.
  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2194
  • Loc: Canada

Post 3+ Months Ago

Then the whole quick and dirty thing just got alot less dirty :)
  • Drake
  • Beginner
  • Beginner
  • User avatar
  • Posts: 47
  • Loc: Canada

Post 3+ Months Ago

It worked perfectly. It's a 1x1 SPAN, positioned behind another SPAN with actual content.

Post Information

  • Total Posts in this topic: 7 posts
  • Users browsing this forum: No registered users and 86 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.