jquery动态类名更新做图像延迟

Question

在页面内部我有一个TR，当用户点击它时，它的颜色变为蓝色，箭头颜色变为白色。这是通过动态更改元素的类来实现的。

但由于这种情况发生了，当用户点击TR用户时看到图像加载延迟。如何预加载CSS图像。

this.className = this.className + " active";

CSS

.table td.arrow div {background-image:url("../stuff/arrow.png");}  
tr.active td.arrow div { background-image:
url("../stuff/arrow_active.png"); }

更新 还有一件事想要更新静态内容从其他服务器加载。

Answer 1

浏览器仅从显示的CSS加载图像。因此，您可以将arrow_active图像放在一个元素中，该元素是可见的但没有不透明度。

但我建议你使用精灵：减少HTTP请求+没有预加载问题：css-tricks.com/css-sprites，alistapart.com/articles/sprites

你可以用纯CSS解决你的问题。

http://jsfiddle.net/Q6dTf/

或者，如果您不想添加新的HTML元素，则可以使用：before伪元素。

Answer 2

正如@meo所说，你可能最好使用精灵，但是如果你想预先加载图像，你可以创建一个虚拟Image实例，将图像加载到浏览器的缓存中。

像：

var preload = new Image();
preload.src = '../stuff/arrow_active.png'; //triggers the download

如果您想等待预加载等待页面构建，您可以监听load在加载文件时preload将触发的事件（请注意这是复杂的地形）。