0

現在、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;
}​
4

3 に答える 3

2

JSは必要ありません。これにはcssスプライトを使用できます。これはより良い解決策です。

詳細については、この記事をお読みくださいhttp://css-tricks.com/css-sprites/

于 2012-07-06T06:36:40.820 に答える
1

あなたの問題を解決する方法はいくつかありますが、

あなたの状況は、css イメージ スプライトを使用した解決策を主張しています。

同じ画像でホバーと通常の背景の両方を使用して画像をスプライトし、ホバー時に背景の位置だけを変更します。この方法では、新しい画像を変更する必要はありません。

css-tricks チュートリアル単純なスプライトにすべてのものは必要ありませんが、読む価値はあります

別の解決策は、javascript で画像をプリロードすることです。

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

画像スプライトを使用すると、よりクリーンなソリューションに見えますが、すべての条件に適用できるわけではありません。

于 2012-07-06T06:40:33.127 に答える
1

あなたがする必要があるのは、これらの画像を 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>

これはスプライトと呼ばれる手法です。これが役立つことを願っています -ck

于 2012-07-06T06:40:42.970 に答える