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

回答