Javascript的預載圖像的CSS背景圖像變化

我正在開發一個網站，需要一個div的背景圖像更改懸停的鏈接。Javascript的預載圖像的CSS背景圖像變化

它的工作方式是：

<a href="index.php" title="Home "> 
<li id="current"> 
    Home<br \> 
    <span class="nav_desc">Text text</span> 
</li> 
</a> 
<a href="about.php" title="About" id="about-link" 
    onmouseover="hover('about');" 
    onmouseout="hoverClear();"> 
<li id="about"> 
    About<br \> 
    <span class="nav_desc">About me</span> 
</li> 
</a> 
<a href="more.php" title="More" 
    onmouseover="hover('portfolio');" 
    onmouseout="hoverClear();"> 
<li id="more"> 
    More<br \> 
    <span class="nav_desc">More More More 
    </span> 
</li> 
</a>

JS：

function hoverClear(){ 
    $('.navReflect').css("background-image", "url(images/"+page+"/reflect.png)"); 
} 
function hover(hover){ 
    $('.navReflect').css("background-image", "url(images/"+page+"/reflect-"+hover+".png)"); 
}

所以，當一個鏈接懸停它的功能改變DIV的背景圖像。但問題出現在頁面首次加載時，鏈接第一次懸停時圖像緩慢加載。

但是，一旦他們已經加載它可以無縫工作。我期望這是一個需要加載的問題。那麼有沒有辦法我可以預先加載圖像，然後仍然使用相同的方法進行懸停。

來源

2011-10-06 ryryan

使用精靈表。 – alex

@alex：這值得一個正確的答案，它真的是*解決方案。 – thirtydot

@thirtydot：完成，歡呼。 – alex

堆棧的圖像作爲一個圖像，然後添加一個類將圖像的背景屬性轉換爲適當的偏移量。

這不僅會將多個圖像轉換爲一個HTTP請求，而且還意味着您不必費心編寫代碼來預加載圖像的狀態懸停狀態。我們稱之爲sprite sheet。

來源

2011-10-06 11:57:15 alex

但是如果我有'background：url（'../../ images/backgrounds/.jpg'）中心沒有重複固定; background-size：cover;'。這怎麼可能與精靈一起工作？ –

非常簡單的預載圖片，是這樣的：

var img = new Image(); 
img.src = "/path/to/image.jpg";

這可能是在window.load或DOM：ready事件某處

來源

2011-10-06 11:53:59 robjmills

您可以製作精靈圖像，即將兩個圖像放在一起。然後，您只需更改背景位置即可顯示圖像的其他部分。如果該元素是例如20個像素高，則通過20個像素移動背景位置：

function hoverClear(){ 
    $('.navReflect').css("background-position", "0 0"); 
} 

function hover(hover){ 
    $('.navReflect').css("background-position", "0 -20px"); 
}

作爲它的唯一的單個圖像中，替代外觀是從一開始加載。這也會減少對服務器的請求數量。

你可以像這樣把更多的圖像放在一起。您可以在my website的右上角看到一個示例，其中一個圖像用於兩個不同的標誌，每個標誌都處於兩種不同的狀態。

來源

2011-10-06 11:59:08 Guffa

您可以使用此解決方案。 http://www.gayadesign.com/diy/queryloader-preload-your-website-in-style/

來源

2011-10-06 12:05:56

Javascript的預載圖像的CSS背景圖像變化

回答

相關問題