0

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

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

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

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

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

例如，有一个按钮：

<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）。这就是为什么应该从另一个脚本预加载图像的原因。而且，是的，我在点击时看到运行时加载的活动状态图像，它看起来很丑。

4

1 回答 1

1

使用精灵并只需更改background-position，这样浏览器只需执行 1 个请求，并且您不必执行预加载，因为正常状态应该是可见的。而且，状态之间的切换速度很快，因为它只是重新定位渲染图像（并不是说单独的图像很慢，只是效率较低）

于 2012-04-13T05:07:39.533 回答