Question

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

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

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

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

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

例如，有一个按钮：

<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');
}

显然，对于这个按钮，预加载的图像应该是最后一个，因为'small'和'pink'是明确定义的，'active'是我们正在寻找的：

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

所以，问题是如何过滤样式。

此致

更新

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

Answer 1

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

又一个图像预加载问题

1 个答案: