- This topic is empty.
December 5, 2012 at 1:58 pm #41180
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:01 pm #116431
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.December 5, 2012 at 2:38 pm #116436
Have you considered using [sprites](https://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 #116438
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:02 pm #116440
You could do
if you want to just affect the color of the link with the transition and not everything that changes about it.December 5, 2012 at 3:13 pm #116442
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 pngsDecember 5, 2012 at 3:27 pm #116445
Do you have a live example?December 5, 2012 at 3:38 pm #116446December 5, 2012 at 3:44 pm #116448
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.December 5, 2012 at 4:00 pm #116451
Thats a good idea, i will try it and post the results.December 5, 2012 at 5:13 pm #116456
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/December 6, 2012 at 11:21 am #116527
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 6, 2012 at 4:02 pm #116550
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?December 7, 2012 at 6:49 am #116692
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?
- The forum ‘CSS’ is closed to new topics and replies.