Preload images for hover active selectors in css files given the css file paths

Question

I am not using css sprites for now.

I understand it is the optimum solution, but I am not able to rush it out in time.

I need a way to preload all the images for hover and active selectors.

I found a jQuery solution here

But I was wondering if there is a way for me to dynamically get the jQuery to read all the active and hover selectors in my css files?

my css filepath is /theme/V1/css/content.css

E.g. of my css file is:

.button_48x49_img {
    width: 48px;
    height: 49px;
}

.button_join_login_48x49_img {
    background-image: url('a.png');
}

.button_join_login_48x49_img:hover {
    background-image: url('b.png');
}

.button_join_login_48x49_img:active {
    background-image: url('c.png');
}

Is there a way to somehow preload only b.png and c.png without me explicitly telling the preload javascript code?

Let me paraphrase. I can write markup in the html portion indicating that I want to preload b.png and c.png. But that means the words b.png and c.png appears twice. Once in the css file and once in the markup. I want to avoid writing this twice. — Kim Stacks, Mar 18 '14 at 04:21
If you are asking about the reason to preload, it is to prevent the initial flickering when I hover. If you are asking why I am looking for a non-conventional to do the preload, I am just looking for a better and more maintainable way to do so. — Kim Stacks, Mar 18 '14 at 06:38

score 1 · Answer 1 · answered Mar 18 '14 at 04:24

1

It would be tricky, as you'll have to target the hover and active selectors - this is beyond me...

HOWEVER - If you are just looking for a quick solution, you can preload the images by calling the images you want to load in a hidden div:

    <div class="preload-images">
        <img src="b.png" />
        <img src="c.png" />
    </div>

And the css:

    .preload-images{display:none;}

Easy peasy.

answered Mar 18 '14 at 04:24

Octavian

494
1
8
20

While I was posting this, I saw your comment above about not wanting to write b.png and c.png twice - if the reason is because of overhead, I'd suggest that this method of preloading probably has lower overhead than a jquery solution. – Octavian Mar 18 '14 at 04:26
I found a jquery solution that does somewhat what i want. sadly, it does increase overhead significantly. I have no choice but to write the image path twice. – Kim Stacks Mar 18 '14 at 06:34

score 0 · Answer 2 · answered Mar 18 '14 at 04:47

To dynamically get the :hover and :active class properties, you can use the following code. By this way you will get both b.png and c.png paths, which you can use to preload.

Fiddle : http://jsfiddle.net/FjTn5/

HTML

<div class="button_48x49_img button_join_login_48x49_img"></div>

Javascript

function getCssProperty(rule, prop) {
    var sheets = document.styleSheets;
    var slen = sheets.length;
    for(var i=0; i<slen; i++) {
        var rules = document.styleSheets[i].cssRules;
        var rlen = rules.length;
        for(var j=0; j<rlen; j++) {
            if(rules[j].selectorText == rule) {
                return rules[j].style[prop];
            }
        }
    }
}


console.log(getCssProperty('.button_join_login_48x49_img:hover', 'background-image'));
console.log(getCssProperty('.button_join_login_48x49_img:active', 'background-image'));

CSS

.button_48x49_img {
    width: 48px;
    height: 49px;
}

.button_join_login_48x49_img {
    background-image: url('a.png');
}

.button_join_login_48x49_img:hover {
    background-image: url('b.png');
}

.button_join_login_48x49_img:active {
    background-image: url('c.png');
}

Instead of writing the image path twice, I now write the css rule twice. If I have to write anything twice, I would have chose to explicitly state the image path twice and do css preload markup like Octavian's answer. — Kim Stacks, Mar 18 '14 at 06:33

score 0 · Answer 3 · answered Mar 18 '14 at 06:36

http://filamentgroup.com/lab/update_automatically_preload_images_from_css_with_jquery/

shows a way for jquery to preload images stated in the css files.

However, this does not discriminate the hover selectors or the active selectors.

Having tried out this solution on my webapp, I noticed a lot of extra time needed to load the images.

On the basis of this question, using this method is the correct answer. For the purposes of writing a webapp that works well, this method would not be ideal.

Preload images for hover active selectors in css files given the css file paths

3 Answers3