javascript - 更改图像 src 添加到资源

Question

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

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

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

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

Answer 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();
    });
});

这是一个工作 jsfiddle。

顺便说一句，你也可以只使用css来做，检查这个 jsfiddle。