javascript - 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 图像放置在可见但没有不透明度的元素中。

但我建议您使用 Sprite :更少的 HTTP 请求 + 没有预加载问题:css-tricks.com/css-sprites , alistapart.com/articles/sprites

您可以使用纯 CSS 解决您的问题。

http://jsfiddle.net/Q6dTf/

如果您不想添加新的 HTML 元素，您也可以使用 :before 伪元素。