Question

现在我正在使用css创建一个onclick图像更改。当我使用它时问题出现在我的网站上，暂停图像加载。我想知道是否有一个javascript或jquery替代品，当我点击它时不需要加载图像，在我点击它直到它加载后让它在后面白色几秒钟。

现在这就是我正在使用的。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;
}

Answer 1

不需要任何JS。你可以使用 css sprites 这个＆amp;这是一个更好的解决方案。

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

Answer 2

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

您的情况主张使用css图像精灵的解决方案。

在同一图像中使用悬停和普通背景精灵拍摄图像，然后在悬停时更改背景位置，这样就不需要更改新图像。

css-tricks tutorial你不需要所有那些东西用于你的简单精灵，但值得一读

另一个解决方案是使用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>

这是一种叫做spriting的技术，希望这有助于确定

Onclick CSS替代方案

3 个答案: