Onclick CSS替代

Question

现在，im使用CSS创建onclick图片更改。 问题出在我使用它的网站上时，图像加载暂停。 我想知道是否有一种JavaScript或jquery替代方法，当我单击它时不需要加载图像，在单击它直到加载之前，它在背面变白了几秒钟。

现在这就是即时通讯所使用的。 这里的例子

<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;
}​

Answer 1

不需要任何JS。 您可以为此使用CSS精灵 ，这是一个更好的解决方案。

阅读本文以了解更多信息http://css-tricks.com/css-sprites/

Answer 2

有很多方法可以解决您的问题，

您的情况要求使用CSS图像精灵的解决方案。

在同一张图片中同时使用鼠标悬停和普通背景来修饰您的图片，然后仅更改悬停时的背景位置，这样就无需更改新图像。

CSS技巧教程您不需要简单Sprite的所有东西，但值得一读

另一个解决方案是使用javascript预加载图像。

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

使用图像精灵看起来更干净，但并非适用于所有情况。

Answer 3

您需要做的是将这些图像拼接成一个大图像，然后像这样改变左或上： DEMO

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>

这是一种叫做拼写的技术，希望对你有帮助-ck