现在我正在使用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;
}
答案 0 :(得分:2)
不需要任何JS。你可以使用 css sprites 这个&amp;这是一个更好的解决方案。
答案 1 :(得分:1)
有很多方法可以解决您的问题,
您的情况主张使用css图像精灵的解决方案。
在同一图像中使用悬停和普通背景精灵拍摄图像,然后在悬停时更改背景位置,这样就不需要更改新图像。
css-tricks tutorial你不需要所有那些东西用于你的简单精灵,但值得一读
另一个解决方案是使用javascript预加载图像。
var img = new Image();
img.src = "http://i.imgur.com/r9d3C.jpg";
使用图像精灵看起来更清晰,但不适用于所有条件。
答案 2 :(得分:1)
您需要做的是将这些图像拼接成一个大图像,然后像这样更改左侧或顶部: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的技术,希望这有助于确定