送信ボタンがホバー上で消えてから再表示されます

Question

私はCSS：hoverを使用して送信ボタンの背景を置き換えています。ボタンの上にマウスを置くと、古い背景イメージが消えて（何もないように見えます）、しばらくしてから新しい背景が再表示されます。おそらく、ボタンの画像ファイルのサイズが大きすぎますが、わずか1.4kbだと私は考えました。これを避ける方法はありますか、キャッシングやプリロード、またはそれらの行に沿ったものはありますか？

Answer 1

これは初期ページの表示/ホバーにのみありますか？

これは、イメージファイルが要求に応じてロードされる、つまりホバーアクションのためです。

これを回避するには、両方のボタンの状態を1つのファイルに保存する必要があります。あなたは、現在の状態の画像の正しい半分を表示するためにbackground-positionプロパティを調整する必要があります。それが表示される前にダウンロードするには、「ホバー」の画像のための時間がかかるためです

button { 
background-image: url(button.png); 
width: 60px; 
height: 20px; 
background-position: 0 0; 
} 

button:hover { 
background-position: 0 -20px; 
} 

Answer 2

：

はここでラフ例（そのbutton.pngは、両方の画像の状態が含まれており、40個のピクセルの高さに注意してください）です。これを防ぐために、スプライトイメージテクニックを使用できます。

例：あなたは、多分、上記、ブリンの答えに、ない実行はいえ、意図に似ている技術を使用することができUsing Sprite Images with INPUT for a Hover Effect

Answer 3

。

.button {background-image: url(img/for/hover-state.png) 
     background-position: top left; 
     background-repeat: repeat-x; 
     background-color: #fff; 
     height: 1.5em; 
     width: 5em; 
} 

.button span 
     {background-image: url(img/for/non-hover-state.png); 
     background-position: top left; 
     background-repeat: repeat-x; 
     background-color: #000; 
     height: 1.5em; 
     width: 5em; 
} 

.button:hover span 
     {background-color: transparent; 
     background-image: none; 
} 

私が言及した類似点は、ホバーフリッカーを避けるために両方の画像を文書上に存在させることです。ボタンをホバーすると、スパンの背景画像が消え、オンデマンドでロードするのではなく、ホバー状態が表示されます。

上記のheight/を指定したにもかかわらず、このテクニックは動的なサイズ変更には有効ですが、固定幅サイズの画像には依存しません（または、設計上許容できるほどの流動性があります） 。