IMG SRC＆安培; jQuery的？ [英] img src & jQuery?

问题描述

我有一个形象，并使用jQuery我已经把它变成一个按钮。
所谓的按键有两种状态：普通推

I have an image, and using jQuery I've turned it into a button. The so called button has two states: regular and pushed.

使用jQuery我检测鼠标按下和鼠标松开，并取代src属性，像这样：

Using jQuery I detect a "mousedown" and "mouseup" and replace the "src" attribute, like so:

$("#btn").click(function() {
   ;//DO SOMETHING HERE WHEN PRESSED
});
$("#btn").mousedown(function() {
   $(this).attr({ src: regular.png });
});
$("#btn").mouseup(function() {
   $(this).attr({ src : pushed.png });
});

虽然这种离线测试它的伟大工程！但是，今天我注意到，当图像存储在服务器上它与每个属性的变化一遍又一遍又一遍加载图像一次。

While testing this offline it works great! But today I noticed that when the images are stored on the server it loads the images over and over and over again with every attribute change.

如何才能避免这种负荷问题，从服务器使所有的图像加载只有一次？

How can avoid this load issue and make all the images load only once from the server?

此外，如果有更好的来完成我想在这里做什么，请让我知道。

Also, if there is a better to accomplish what I'm trying to do here, please let me know.

感谢您。

推荐答案

创建一个包含按钮状态的单个图像。然后，动态改变鼠标移开时/鼠标悬停背景图像的位置：

Create a single image containing both button states. Then, dynamically change the position of the background image on 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 是100px的50像素。

This example assumes a target image of 50px square and merged_button_bg.png is 100px by 50px.

这篇关于IMG SRC＆安培; jQuery的？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！