jquery - 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

创建包含两个按钮状态的单个图像。然后，动态更改鼠标移出/鼠标悬停时背景图像的位置:

<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 像素 x 50 像素。