6 replies to this topic

[YSR]

I used image swapping when hovering on a menu button with CSS
Every thing worked fine, except:

If you were visiting the page for the first time, so that the images is not cached in your browser yet.. The main images loads with the page since they are a part of that page but..
When hovering on the button which supposed to swap the image... the current image disappears but the image that should be swapped with doesn't show up.
That's happening because the images didn't load yet, so..
After hovering the first time on the buttons the other images (which supposed to be swapped with) start loading, and the next time you hover on the buttons after few seconds everything works fine.

The question is:
Is there anyway to make the other images (which will be swapped with the main ones) to pre-load when the whole page start loading, so that when someone hover on the buttons the images are already pre-loaded and cached?

I know this can be done by placing javascript code in the head to pre-load all the images you want before/while loading the page, so the images are already cached in the browser and ready to show when they are called.
But the thing is I don't want to use javascript in the head, and thats why I made the whole image swapping thing with CSS in first place.


Thanks in advance

[biscuitrat]

A few questions:

1) Can I see this page in action?
2) How big are these images we're talking about?
3) Instead of having separate states for your images, why not roll them into one? Make one file that has all three states next to each other, side to side, or top to bottom. Then, just set the margin/padding necessary to show the new states. I can explain this more when I'm not trying to recover 13 credits I lost for no reason. I'm not really rational right now!

Lemme know!

[jlhaslip]

Another method is to pre-load the images into a one-pixel size space on the fringe of your page so when the page first loads, they are pre-loaded with the page and there is a minimal delay when the on-hover state occurs.

[rvalkass]

One way many people do this (similar to jlhaslip's suggestion) is to preload the images using Javascript. You can go from very simplying writing some JS to load the image and do nothing with it, to those that are slightly more complicated and can do all sorts of fancy tricks.

There are lots available from this quick search. The simplist one is probably this script if you want to quickly try it out.

Just remember that if the images have a very large file size then they may still not have loaded by the time they roll over the links. If that is the case then your best bet is to try and get the file size down.

[YSR]

biscuitrat: Lol, I'm sorry for those 13 credits you lost..

1) Sure here's the Link but I haven't built anything in the page yet.
2) The images are only buttons, 3Kb each... 4-5 of them, that makes the total around 10-12 Kb.
3) You mean make all the three states of each button in one single image... But the problem is there's a fair amount of space to the nearest area to hide them... Or can that be done by using transparency in the single image file between each state??


jlhaslip: I like the idea, I think I will try it now to see..


rvalkass: I know how to do that in Javascript.. But I said in the first post that I don't want it to be done using javascript... But thanks for the suggestion and the links

[Kubi]

I go with haslips suggestion. If you want you may even be able to make that 1 pixel image go under the ad you placed for Trap17(thank you).

CSS:

.buttonl { background-image url(images/x.png) height: 1px width: 1px };

Possibly looking something like that. Just place the div tag for it somewhere

<div class=buttonl></div>

Hope you figure it out.

[minimcmonkey]

There is a standard javascript method for pre-caching images.... cant remember what it is. but like someone sad above, one way is to have a 1px one somewhere, so it loads with the page... you could even hover a div over a few 1px images, or arrange them as some kind of image...