Image preloading with CSS in Chrome
# December 5, 2012 at 1:58 pm
The latest roadblock I’ve hit is image preloading, and more specifically in Chrome.
I have tried numerous techniques but Chrome will just not preload the images I want. What I want to preload is the background images of buttons when hovered. I have found numerous ways to do that and it worked in Firefox and Internet Explorer.
I have tried placing the images in a hidden div right after the body tag. I have tried using body:after in my CSS. And I have tried loading them offscreen. None of this works. What I have settled to for now is this:
content: url(_images/button_hover.png) url(_images/navigation_button_hover.png)
It works everywhere except Chrome. Can you help?# December 5, 2012 at 2:38 pm
Have you considered using [sprites](http://css-tricks.com/css-sprites/ “CSS-Tricks Article”)?
Basically it is one image that holds multiple images. They can be large (every image in the layout) or small scale (just a button’s regular, hover, and pressed state).
All you have to do is change the background position when the button is hovered over.# December 5, 2012 at 2:42 pm
I did try using sprites, it was the first hing i did. But that would not work either for some weird reason. Anyways afterwards I wanted to use CSS transitions on hover, and when using sprites you get a sliding effect instead of a fading effect, so i went back to separate images.
Edit: The reason sprites would not work may be that I restated the background-image on :hover instead of just the position, however sprites will not work for me for the reason that i stated.# December 5, 2012 at 3:13 pm
I still want to use CSS transitions with the sprite images, but what happens is that because you change the background position to get the next image in a sprite, the transition makes it so the hover icon slides in (from the right for example), when i want it to fade in. When i use 2 separate files i get the exact desired effect, but there seems to be no way around it for sprites.
Edit: I guess I did not clarify that i am using transparent pngs# December 5, 2012 at 3:38 pm# December 6, 2012 at 11:21 am
First thing i tried was this.. For some reason it doesn’t work with chrome, works fine in all other browsers.
I have concluded that it is impossible to to this in Chrome, a bug perhaps?
I literally just put the hover image right next to button, fully visible, not hidden not set to display:none, and even then when i hovered over the button it had to reload it!# December 7, 2012 at 6:49 am
It is being loaded a second time for me. For example on the navigation menu, i use the hover image as the current tab image so it should be always preloaded right? When i hover on an other menu button the image is being requested and loaded again for me… Could this be a configuration issue with my chrome setup?
You must be logged in to reply to this topic.