另一个图像预加载问题

我有一个脚本可以手动预加载所有需要的图像。它看起来像这样：

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

实际上，每种类型的按钮和其他元素都有很多这样的条目。最糟糕的是，该项目正在进行中，每天都在添加新按钮，因此很容易忘记将它们添加到列表中。

现在，我想使用一个通用脚本来预加载正在使用的所有内容。

它应该使用类似jQuery的选择器枚举文档中的所有元素（例如，$（'buttons'）以获取所有按钮），然后 - 这对我来说是最难的部分 - 找到样式，这是元素的类和"active"类的结果（不要与：active pseudoclass混淆，不过，应该没有任何区别）。

例如，有一个按钮：

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

还有以下 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');
}

显然，对于此按钮，预加载的图像应该是最后一个，因为"小"和"粉红色"是明确定义的，并且"活动"是我们正在寻找的：

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

因此，问题是如何过滤样式。

问候

更新

如您所见，最初按钮没有"活动"样式。它被添加了一个脚本在触摸事件（因为Android Webkit不支持真正的：active）。这就是应从另一个脚本预加载图像的原因。而且，是的，我在单击时看到活动状态图像的运行时加载，它看起来很丑。