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

回答

相关问题