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

Answer 3

您是否尝试过Preload插件？

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

顺便提一下，我同意CSS sprites是更好的解决方案如果它们适合于这种情况，即如果你完全控制图像本身。

img src＆amp; jQuery的？

3 个答案: