Grow your CSS skills. Land your dream job.

Image preloading with CSS in Chrome

  • # December 5, 2012 at 1:58 pm

    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

    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

    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:02 pm

    You 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

    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

    # December 5, 2012 at 3:27 pm

    Do you have a live example?

    # December 5, 2012 at 3:44 pm

    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

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

    # December 5, 2012 at 5:13 pm

    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..

    # December 6, 2012 at 8:52 am

    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

    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

    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

    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?

Viewing 15 posts - 1 through 15 (of 16 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".