Onclick CSS替代

現在即時通過使用css創建onclick圖像更改。當我使用它時，問題出現在我的網站上，圖像加載暫停。我想知道是否有一個javascript或jquery替代方案，當我點擊它時不需要加載圖像，在單擊它之前使它在後面白色幾秒鐘，直到它加載。Onclick CSS替代

現在，這是即時通訊使用。 Example Here

<input type="submit" class="create" style="font: 24px Arial, Helvetica, sans-serif; width: 681px;" value="CREATE "> 
 
.create { 
    margin: 0 auto; 
    height: 62px; 
    width: 681px; 
    color:#FFF; 
    background-image:url(http://i.imgur.com/tWGcy.jpg); 
    outline: 0; 
    border: 0; 
    margin-top: 7px; 
    font-family: Arial, Helvetica, sans-serif; 
} 
.create:active { 
    margin: 0 auto; 
    height: 62px; 
    width: 681px; 
    color:#FFF; 
    background-image:url(http://i.imgur.com/r9d3C.jpg); 
    outline: 0; 
    border: 0; 
    margin-top: 7px; 
    font-size: 40px; 
    font-family: Arial, Helvetica, sans-serif; 
}

來源

2012-07-06 mystycs

試試預加載圖像。 – Musa 2012-07-06 06:35:26

你需要做的是拼接的圖像轉換成一個大的圖像，然後只需改變左邊或頂部是這樣的：

CSS：

button { 
    background:url(http://anton.shevchuk.name/wp-content/uploads/2009/07/button-sprite-result.png); 
    border:0; 
    padding:0; 
    width:310px; 
    height:80px; 
} 

button:hover { 
    background-position:0 -70px; 
} 

button:active { 
    background-position:0 -140px; 
}

HTML：

<button></button>

這是一種名爲spriting的技術，希望這有助於-ck

來源

2012-07-06 06:40:42 ckozl

是的，我現在正在調查它。 – mystycs 2012-07-06 06:41:20

是啊對不起，已經有80％完成製作演示，當我看到有人打我衝到... – ckozl 2012-07-06 06:42:18

@ckozl良好的工作與演示:) – sabithpocker 2012-07-06 06:43:03

不需要任何JS。你可以使用css精靈這個&這是一個更好的解決方案。

閱讀本文的詳細http://css-tricks.com/css-sprites/

來源

2012-07-06 06:36:40 sandeep

有趣的我聽說過這個。 – mystycs 2012-07-06 06:37:42

現在看看它 – mystycs 2012-07-06 06:38:50

有許多的方式來解決您的問題，

你的情況主張使用CSS圖像精靈的解決方案。

在同一張圖片中同時懸停和正常背景的圖片，然後在懸停時更改背景位置，這樣就不需要更改新圖片。

css-tricks tutorial你不需要所有的東西爲您簡單的精靈，但它值得一讀

另一種解決方案將是使用JavaScript預裝圖像。

var img = new Image(); 
img.src = "http://i.imgur.com/r9d3C.jpg";

使用圖像精靈看起來更乾淨的解決方案，但不適用於所有條件。

來源

2012-07-06 06:40:33 sabithpocker

回答

相關問題