img src& amp; 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，我检测到"mousedown"和"mouseup"并替换了"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为100像素x 50像素.

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

这篇关于img src& amp; jQuery的?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！