更改图像 src 添加到资源答案

【问题标题】：Changing image src adds to resources更改图像 src 添加到资源
【发布时间】：2013-03-14 08:59:06
【问题描述】：

我有两张图片 - 一张用作默认状态，另一张用作悬停状态。我像这样换掉它们：

$('.close-project').hover (e) ->
  $(@).children().attr 'src', 'images/close-button-hover2.jpg'
, (e) ->
  $(@).children().attr 'src', 'images/close-button2.jpg'

似乎每次我悬停时，都会有一个 GET 请求到服务器，并且这个图像的另一个副本到资源（根据 Chrome 的开发工具）。有没有办法防止这种情况发生？

提前感谢您查看这篇文章。

【问题讨论】：

精灵它们并用作背景，用 css 修改位置并在悬停时更改类
您的服务器传输图像的方式很可能有问题，导致 Chrome 不知道缓存它们。
我在将图像用作 CSS 背景时遇到了问题 - 即使我通过创建 new Image() 并更改 src 以匹配图像位置在我的 javascript 中预加载它们，图像仍然是在页面上加载的最后一件事......关于为什么会发生这种情况的任何想法？
检查您的服务器是否正在发送阻止缓存的标头。

标签： javascript jquery html coffeescript

【解决方案1】：

创建两个图像元素，而不是更改 img 源地址，一个用于默认图像，一个用于隐藏图像，并在悬停事件触发时简单地切换哪个可见。

HTML：

<a href="#">
    <img id="default" alt="" src="default.jpg"/>
    <img id="hidden" style="display:none" alt="" src="hidden.jpg"/>
</a>

还有 javascript：

$(function () {
    $('a').hover(function () {
        $('#default').hide();
        $('#hidden').show();
    }, function () {
        $('#default').show();
        $('#hidden').hide();
    });
});

Here is a working jsfiddle.

顺便说一句，你也可以只使用css，check this jsfiddle。

【讨论】：