img src 和jQuery？

发布于 2024-08-13 19:50:56 字数 511 浏览 3 评论 0原文

我有一个图像，并使用 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 });
});

在离线测试时，它效果很好！但今天我注意到，当图像存储在服务器上时，它会在每次属性更改时一遍又一遍地加载图像。

如何避免这种加载问题并使所有图像仅从服务器加载一次？

另外，如果有更好的方法来完成我在这里想做的事情，请告诉我。

谢谢。

原文

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

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.

Thank you.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

樱娆 2024-08-20 19:50:57

您是否尝试过 Preload 插件？

更新：抱歉，我没有仔细阅读，我以为这是滚动要求。更通用的预加载脚本位于此处。

顺便说一句，我同意 CSS 精灵是更好的解决方案如果它们适合具体情况，即如果您可以完全控制图像本身。

回复收藏 0 原文

迷离° 2024-08-20 19:50:56

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

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

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>

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

回复收藏 0 原文