我有一张图片，并使用 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 });
});
在离线测试它时效果很好！但是今天我注意到，当图像存储在服务器上时，它会随着每个属性的变化一遍又一遍地加载图像。
如何避免此加载问题并使所有图像仅从服务器加载一次？
另外，如果有更好的方法来完成我在这里尝试做的事情，请告诉我。
谢谢你。
除了更改 src 属性，您可以使用 span 或 div 来显示图像（通过背景图像）并创建两个 CSS 类，每个图像一个。然后你可以切换元素的 CSS 类来切换按钮。
创建包含两种按钮状态的单个图像。然后，在 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。