Yet another image preloading issue

Question

I have a script that manually preloads all images that will be required. It looks like this:

<script type="text/javascript">
(new Image()).src = "/images/buttonpinkpressed.png";
(new Image()).src = "/images/smallbuttonpinkpressed.png";
</script>

Actually, there is a lot of such entries for every type of button and other elements. The worst of all is that the project is in progress and new buttons are being added daily, so it's easy to forget add them to the list.

Now I want to use one universal script that preloads everything in use.

It should enumerates all elements with a jQuery-like selector (say, $('buttons') to get all buttons) in the document, then - and this is the hardest part to me - find the style which is the result of the element's class and 'active' class (not to be confused with :active pseudoclass, though, there should not be any difference).

For instance, there is a button:

<button type="button" class="small pink"><p>Menu</p></button>

And there is the following CSS:

button.pink.large
{
    background-image: url('buttonpinknormal.png');
}
button.pink.large.active
{
    background-image: url('buttonpinkpressed.png');
}
button.pink.small
{
    background-image: url('buttonpinksmallnormal.png');
}
button.pink.small.active
{
    background-image: url('buttonpinksmallpressed.png');
}

Obviously, for this button the preloaded image should be the last one, since 'small' and 'pink' are explicitly defined and 'active' is what we are looking for:

button.pink.small.active
{
    background-image: url('buttonpinksmallpressed.png');
}

So, the question is how to filter the styles.

Regards,

UPDATE

As you can see, initially the button has no 'active' style. It's being added with a script on touch event (because Android Webkit doesn't support real :active). That's why the image should be preloaded from another script. And, yes, I see run-time loading of active-state images on click, it looks UGLY.

I'm confused. Are you trying to grab all image URLs from your page CSS and then preload them using javascript from that page? For what purpose? The CSS styles that are in use will either load before your JS runs or shortly thereafter (depending upon relative position of CSS/scripts in your page). — jfriend00, Apr 13 '12 at 04:57
Why don't you use sprites and background position - http://www.noobcube.com/tutorials/html-css/css-background-image-sprites-a-beginners-guide-/? — Ilia Frenkel, Apr 13 '12 at 04:57
Thank you, Derek! Will this brute force type of solution fast enough? — noober, Apr 13 '12 at 04:58
@ilia-frenkel - you should put that into an answer. It's a good idea. — jfriend00, Apr 13 '12 at 04:59
Ilia Frenkel, I've got the idea, but I have the common style for all buttons: background-position: center center; This conflicts with the sprite solution, doesn't it? — noober, Apr 13 '12 at 05:10
@noober - If you want to grab all CSS urls out and preload them using your method, then use it. (Note, it only works if the CSS is actually inside the `html` tag) But for fast pre-loading, of course then you should use `background-position` ;) (Google uses it too.) — Derek 朕會功夫, Apr 13 '12 at 05:12

score 1 · Accepted Answer · answered Apr 13 '12 at 05:07

1

Use a sprite and just change the background-position, that way the browser only has to do 1 request, and you won't have to do a preload since the normal state should be visible. And, switching between states is lightening fast since its just re-positioning the rendered image (not that separate images is slow, just that it is less efficient)

answered Apr 13 '12 at 05:07

nathanjosiah

4,441
4
35
47

Unfortunately, I already have background-position: center center; in the common style. And I really need it. – noober Apr 13 '12 at 05:12
Do you recommend get rid of background-position: center center; dependency to use sprites? – noober Apr 13 '12 at 05:14
there is almost always a way around the center center dependency, most of the time it can be solved by using an additional element with a margin of `auto` – nathanjosiah Apr 13 '12 at 14:13

Yet another image preloading issue

1 Answers1