Question

我有两个图像 - 一个用作默认状态，另一个用作悬停状态。我把它们换掉了：

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

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

提前感谢您查看此帖子。

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

Here is a working jsfiddle

顺便说一下，您也可以只使用 css ，check this jsfiddle来完成。

更改图像src会增加资源

1 个答案: