Forums

Singular_one

Hello again!

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:

body:after
{
  content: url(_images/button_hover.png) url(_images/navigation_button_hover.png)
  position: absolute;
  top: -9999px;
  left: -9999px;
}

It works everywhere except Chrome. Can you help?

Singular_one

To clarify whatever method i try, chrome will not use the preloaded image, but will have to load it again the first time a button is hovered, after that all subsequent buttons of that type don't have to reload it.

tbwiii

Have you considered using sprites?

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.

Singular_one

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.

tbwiii

You could do

transition: color <duration> <timing-function> <delay>;

if you want to just affect the color of the link with the transition and not everything that changes about it.

Singular_one

I have since tried using a javascript method and that did not work either.

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

tbwiii

Do you have a live example?

Singular_one

https://dl.dropbox.com/u/85681326/Cloudworks - Copy/index.html

tbwiii

Have you tried using the sprite in this way:

Put the normal bg on the list-item Put the hover bg on the hover-state of the anchor tag Fade the anchor's hover-state bg in the way you are now.

Theoretically that should achieve the same look and be preloaded.

Singular_one

Thats a good idea, i will try it and post the results.

Singular_one

Nope, won't work. I can't get the preloading or the fade effect. Thank you for your help tbwii but it seems it can't be done with CSS maybe javascript? I don't have a clue about javascript though..

tbwiii

Instead of using :after, did you try just putting the images in a hidden div at the bottom and make that div for any preloaded images you need? That should work.

edit: I can't get the forum to display my code right. Here's an example : http://jsfiddle.net/tJyVc/

Singular_one

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!

tbwiii

I'm checking the network requests and the images are only being called for me 1 time.

Have you tried watching the network tab of the Chrome Developer tools?

Singular_one

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?

tbwiii

I'm not sure what exactly could be causing that. Are you able to test with Chrome on another machine?

treehouse : what would you like to learn today?

Forums

Image preloading with CSS in Chrome