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

你试过Preload插件吗？

更新：对不起，我没有仔细阅读，我认为这是一个翻转要求。更通用的预加载脚本是here。

顺便说一句，我同意 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>

本示例假设目标图像为 50px 正方形，merged_button_bg.png 为 100px x 50px。