預加載CSS背景圖片[不能使用精靈]

Question

我在這個網站上，用戶可以通過更改div的背景圖像來生成預覽。 問題是我第一次將背景圖像更改為其他圖像時，圖像加載需要一些時間，但是在此之后，如果我變回原樣，一切看起來都非常流暢。

我打算使用CSS Sprite消除此問題，但是當我嘗試使用它時，一些瀏覽器幾乎凍結了，因為它們無法處理大圖像。

所以我的問題是，如何在不使用CSS精靈的情況下預加載這些特定的背景圖像？

編輯：

如果不清楚，我深表歉意。 我正在創建的內容有點像角色創建屏幕。 我想做的是，當頁面加載時，用戶可以選擇他們想要成為的種族。 當他們這樣做時，我希望顯示一個加載器，並且我希望所有與該種族相關的圖像都被預加載。 完成后，我要刪除加載程序，然后用戶可以進一步自定義其角色。

當用戶自定義其角色時，角色div上的背景圖像將更改為預加載的圖像之一。 我嘗試使用如下所述的Rustam方法使用JavaScript加載圖像，但得到的結果相同。 第一次顯示背景圖像時，需要一秒鍾來加載。

Answer 1

使用js進行頁面加載后將其緩存。

Answer 2

如果要在沒有javascript的情況下執行此操作-放入html不可見的<img>的唯一方法。 像這樣：

<div style="overflow:hidden;height:0;"><img/><img/><img/><img/></div>

但是div一定不能被display:none ， visibility:hidden因為在這種情況下某些瀏覽器無法加載它。

Answer 3

請參閱此處： 僅CSS圖像預加載-關鍵是在其他div中將所有需要的圖像作為背景加載，但是div被“隱藏”在頁面之外。

將圖片加載到元素的常規狀態，僅將其移至背景位置。 然后移動背景位置以將其顯示在懸停上。

#img1 { background: url(images/img1.png) no-repeat -9999px -9999px; }
#img2 { background: url(images/img2.png) no-repeat -9999px -9999px; }

Answer 4

Javascript預加載圖像的方式：

var img = document.createElement("img");
img.setAttribute('src', 'image_path');

// Load event
img.onload=function(){ alert("It's loaded!") };

Answer 5

我將為此使用Web Workers，並在單獨的線程中預加載后台的所有圖像。 使用此方法，您不會阻止瀏覽器UI，並且當工作程序完成時就可以使用圖像。

在這里看看http://www.html5rocks.com/en/tutorials/workers/basics/