Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Image preloading with CSS in Chrome

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #41180
    Singular_one
    Member

    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?

    #116431
    Singular_one
    Member

    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.

    #116436
    tbwiii
    Participant

    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.

    #116438
    Singular_one
    Member

    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.

    #116440
    tbwiii
    Participant

    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.

    #116442
    Singular_one
    Member

    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

    #116445
    tbwiii
    Participant

    Do you have a live example?

    #116446
    Singular_one
    Member
    #116448
    tbwiii
    Participant

    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.

    #116451
    Singular_one
    Member

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

    #116456
    Singular_one
    Member

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

    #116517
    tbwiii
    Participant

    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/

    #116527
    Singular_one
    Member

    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!

    #116550
    tbwiii
    Participant

    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?

    #116692
    Singular_one
    Member

    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)
  • The forum ‘CSS’ is closed to new topics and replies.