img src和jQuery？

Question

我有一个图像,使用jQuery我把它变成了一个按钮.所谓的按钮有两种状态:常规和推动.

使用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 });
});

在离线测试时,它非常有用!但今天我注意到,当图像存储在服务器上时,它会在每次属性更改时反复加载图像.

如何避免此加载问题并使所有图像仅从服务器加载一次？

另外,如果有更好的完成我想在这里做的事情,请告诉我.

谢谢.

Answer 1

您可以使用span或div来显示图像(通过背景图像),而不是更改src属性,并创建两个CSS类,每个图像一个.然后你可以切换元素的CSS类来切换按钮.

Answer 2

创建包含两个按钮状态的单个图像.然后,在mouseout/mouseover上动态更改背景图像的位置:

<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像素,并且merged_button_bg.png为100像素×50像素.