3

私は画像を持っていて、jQueryを使用してそれをボタンに変えました。いわゆるボタンには、通常とプッシュの2つの状態があります。

jQueryを使用して、「mousedown」と「mouseup」を検出し、次のように「src」属性を置き換えます。

$("#btn").click(function() {
   ;//DO SOMETHING HERE WHEN PRESSED
});
$("#btn").mousedown(function() {
   $(this).attr({ src: regular.png });
});
$("#btn").mouseup(function() {
   $(this).attr({ src : pushed.png });
});

これをオフラインでテストしている間、それは素晴らしい働きをします！しかし、今日、画像がサーバーに保存されると、属性が変更されるたびに何度も何度も画像が読み込まれることに気付きました。

この読み込みの問題を回避し、サーバーからすべての画像を1回だけ読み込むにはどうすればよいですか？

また、私がここでやろうとしていることを達成するためのより良い方法があれば、私に知らせてください。

ありがとうございました。

4

3 に答える 3

5

両方のボタンの状態を含む単一の画像を作成します。次に、マウスアウト/マウスオーバーで背景画像の位置を動的に変更します。

<style type="text/css">

 .button_normal {
   width: 50px;
   height: 50px;
   background-image: url(merged_button_bg.png);
   background-repeat: no-repeat;
   border: solid black 1px;
   cursor: pointer;
 }

 .button_over {
  background-position: -50px;
 }

</style>

<div class="button_normal"></div>

<script>

 $(document).ready(function() {
  $('.button_normal').mouseover(function() {
   $(this).addClass('button_over');
  });
  $('.button_normal').mouseout(function() {
   $(this).removeClass('button_over');
  });
 });

</script>

この例では、50ピクセル四方のターゲット画像を想定しており、100ピクセルmerged_button_bg.png×50ピクセルです。

于 2009-12-03T20:41:34.140 に答える
5

src属性を変更する代わりに、spanまたはdivを使用して（背景画像を介して）画像を表示し、画像ごとに1つずつ2つのCSSクラスを作成できます。次に、要素のCSSクラスを切り替えてボタンを切り替えることができます。

于 2009-12-03T20:20:42.847 に答える
2

プリロードプラグインを試しましたか？

更新：申し訳ありませんが、十分に注意深く読んでいませんでした。ロールオーバーの要件だと思いました。より一般的なプリロードスクリプトはこちらです。

ちなみに、CSSスプライトが状況に適している場合、つまり画像自体を完全に制御できる場合は、CSSスプライトの方が優れたソリューションであることに同意します。

于 2009-12-03T20:19:53.550 に答える