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

页面内我有一个TR，当用户单击它时，将其颜色更改为蓝色，将箭头颜色更改为白色。这是通过动态地改变元素的类来实现的。jquery动态类名更新做图像延迟

但由于这种情况发生的是，当用户点击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"); }

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

2012-03-26 Dev G

使用精灵将是这里最好的解决方案。较少的HTTP请求+无预加载问题：http://css-tricks.com/css-sprites/，http://www.alistapart.com/articles/sprites – meo 2012-03-26 13:40:17

浏览器只从显示的CSS加载图像。所以你可以将你的arrow_active图像放在一个元素中，这个元素是可见的但没有不透明。

但我会建议你使用精灵：少HTTP请求+无预压的问题：css-tricks.com/css-sprites，alistapart.com/articles/sprites

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

或者，您也可以使用：伪元素之前，如果你不想添加一个新的HTML元素。

2012-03-26 13:42:41 meo

这看起来像一个解决方案。让我试试并回来。 – 2012-03-26 14:07:04

你为什么不投票我的答案，然后 – meo 2012-03-26 14:08:28

我累了，但没有成功，图像得到加载。但是，当我点击TR时，它再次加载图像:( – 2012-03-26 18:36:37

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

像：

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

在要等待预加载等待打造您可以监听load事件，当它已经完成加载文件preload将触发页面的情况下（是小心，因为这是复杂的地形）。

2012-03-26 13:45:41 m90

截至目前，我有个人形象，将来会使用精灵。 – 2012-03-26 18:38:21

回答