- This topic is empty.
-
AuthorPosts
-
December 5, 2012 at 1:58 pm #41180Singular_oneMember
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?
December 5, 2012 at 2:01 pm #116431Singular_oneMemberTo 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 #116436tbwiiiParticipantHave 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 #116438Singular_oneMemberI 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 #116440tbwiiiParticipantYou could do
transition: color
; 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 #116442Singular_oneMemberI 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
December 5, 2012 at 3:27 pm #116445tbwiiiParticipantDo you have a live example?
December 5, 2012 at 3:38 pm #116446December 5, 2012 at 3:44 pm #116448tbwiiiParticipantHave 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 #116451Singular_oneMemberThats a good idea, i will try it and post the results.
December 5, 2012 at 5:13 pm #116456Singular_oneMemberNope, 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..
December 6, 2012 at 8:52 am #116517tbwiiiParticipantInstead 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 #116527Singular_oneMemberFirst 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 #116550tbwiiiParticipantI’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 #116692Singular_oneMemberIt 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?
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.