img src y jQuery?

Question

Tengo una imagen, usando jQuery y me he convertido en un botón. El botón de llamada tiene dos estados:. Regulares y empujó

El uso de jQuery detecto un "mousedown" y "mouseup" y sustituir el atributo "src", así:

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

Al probar esta línea funciona muy bien! Pero hoy he notado que cuando las imágenes se almacenan en el servidor que carga las imágenes una y otra y otra vez con cada cambio de atributo.

¿Cómo se puede evitar este problema de carga y hacer que toda la carga de imágenes solamente una vez desde el servidor?

Además, si hay una mejor para lograr lo que estoy tratando de hacer aquí, por favor hágamelo saber.

Gracias.

Answer 1

Crea una imagen única que contiene ambos estados de botón. A continuación, cambiar dinámicamente la posición de la imagen de fondo en 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>

Este ejemplo asume una imagen de destino de 50 píxeles cuadrados y merged_button_bg.png es 100px por 50px.

Answer 2

En lugar de cambiar el atributo src, se puede usar un lapso o div para mostrar la imagen (una imagen de fondo a través) y crear dos clases CSS, uno para cada imagen. A continuación, sólo puede cambiar de clase CSS del elemento para cambiar los botones.

Answer 3

¿Has probado la precarga plugin?

Actualización: Lo siento, no he leído con suficiente atención, pensé que era un requisito de vuelco. Un guión más general de la precarga es aquí .

Por cierto, estoy de acuerdo que los sprites CSS son la mejor solución si que son apropiados para la situación, es decir, si tiene un control completo sobre las propias imágenes.