Bandwidth Consumption for Rollover images

[KCgame]

Hi,

I have a question regarding rollovers images. I understand that when we move the mouse over an button (with Rollover property), it loads another button (or whatever pic the user specify).

Is this loading of the image consuming bandwidth everytime the mouse moves over the button? If this is the case, then if user moves the mouse on..and off..on...off..on..off the button like fifty times, will the bandwidth consumption increases to (size of image x 50) bytes ?

Any comment and advice will be appreciated. Thanks.

[Ainslie X11]

No, if the image isn't already preloaded... then the first time it loads it gets stored in cache

[KCgame]

No, if the image isn't already preloaded... then the first time it loads it gets stored in cache

Thanks, Ainslie, does it means that upon loading of a webpage, all the rollover images will be preloaded and these will consume the bandwidth once?

[Kravvitz]

Yes, if you are using an image preloader script.

There are no guarantees about how long things will stay in cache, but you can expect theat they will stay in cache for the length of the average visit.

[KCgame]

Yes, if you are using an image preloader script.

Sorry, i'm not sure about the term "image preloader script"
Does it means the standard HTML code for Rollover properties?

[Kravvitz]

I'm not sure what you mean by "standard HTML code for Rollover properties".

An image preloader script is a JavaScript script that preloads images in the page before they are used. JavaScript image rollovers usually use these.

[Egor]

If you use CSS for rollovers, they will be cached. And if you use one graphic for all your rollovers, then change background positions for each button/rollover then there's no need for a preloader script as the whole thing loads in one go. But that has no effect on bandwidth.

It's impossible to predict how often the visitor clears their cache though, or what settings they're browsing with.

[Ainslie X11]

correct, correct and correct - I throw preloaders in, because I'm 'particular' about images being pre-loaded - and it's always good to bloat the code a little here and there

short answer to your question from every angle, (except perhaps for a very odd browser setting), once it's loaded on rollover - it's cached, and it won't suck the life out of your bandwidth allocation.

if your not using a css background position flip, then I'd recommend using a preloader - to eliminate a small lag while the rollover loads.

if your real lucky and a person revisits before the cache is cleared or expires, they'll still be in cache... like they'd never left

:-)

[ICO]

I'd use a CSS rollover any day over JS, unfortunately, its a lot easier to do one in JS if your button widths aren't the same, or eh, maybe that's just my own personal struggle.

[Ainslie X11]

I guess there might be instances when a rollover might have different width, I won't ask why - but...

a & a:hover can have completely different dimensions

:-)

[ICO]

a & a:hover?

They'd have different widths if the text inside isn't the same size and you need to conserve space. no point giving a "home" tab extra pixel space if you can't spare it.

[Ainslie X11]

ummm... ok

a & a:hover (two different classes) can accordingly, have (different parameters)

:-)

[KCgame]

Thanks for the helpful replies, guys

Think will use the standard javascript for my rollover images
(without worrying the BW consumption)