另一個圖像預加載問題

我有一個腳本可以手動預先加載所有需要的圖像。它看起來像這樣：另一個圖像預加載問題

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

顯然，此按鈕的預裝的形象應該是最後一個，因爲「小'和'粉紅'被明確定義並且'活動'是我們正在尋找的：

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

因此， estion是如何過濾樣式。

問候，

UPDATE

正如你所看到的，最初的按鈕沒有 '主動' 的風格。在觸摸事件中添加了腳本（因爲Android Webkit不支持real：active）。這就是爲什麼圖像應該從另一個腳本中預加載的原因。而且，是的，我看到點擊時運行狀態圖像的加載，看起來很醜。

來源

2012-04-13 noober

'var new_array = $（「html」）。html（）。匹配（/ url \（（。+）\）/ g）' – 2012-04-13 04:53:36

我很困惑。您是否試圖抓取頁面CSS中的所有圖片網址，然後使用該頁面上的JavaScript預加載它們？出於什麼目的？正在使用的CSS樣式將在JS運行之前或之後不久（取決於頁面中CSS /腳本的相對位置）加載。 – jfriend00 2012-04-13 04:57:22

爲什麼你不使用精靈和背景位置 - http://www.noobcube.com/tutorials/html-css/css-background-image-sprites-a-beginners-guide-/？ – 2012-04-13 04:57:54

使用一個精靈，只需更改background-position，這樣瀏覽器只需要執行1個請求，並且您不必執行預加載，因爲正常狀態應該是可見的。並且，狀態之間的切換自從它剛剛重新定位渲染的圖像以來變得快速起來（不是單獨的圖像緩慢，僅僅是效率較低）

來源

2012-04-13 05:07:39 nathanjosiah

不幸的是，我已經有背景位置：中心;在共同的風格。我真的需要它。 – noober 2012-04-13 05:12:56

你是否建議擺脫背景位置：center center;依賴使用精靈？ – noober 2012-04-13 05:14:52

好的，會這樣做。 – noober 2012-04-13 05:16:53

另一個圖像預加載問題

回答

相關問題