更改图像src添加到资源

我有两个图像 - 一个用作默认状态，另一个用作悬停状态。我换出来，像这样：更改图像src添加到资源

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

看来，每个I悬停的时候，有一个GET请求到服务器，该图像的另一个副本的资源（根据Chrome的开发者工具）。有没有办法来防止这种情况发生？

在此先感谢您检查这篇文章。

来源

2013-03-13 tmimicus

sprite它们并用作背景，使用css修改位置，并在悬停时更改类 – charlietfl 2013-03-14 00:03:01

服务器传送图像的方式很可能出现问题，Chrome不知道如何缓存它们。 – 2013-03-14 00:08:24

我在使用图像作为CSS背景时遇到了问题 - 即使我通过创建一个“新Image（）”并更改了“src”以匹配图像位置来预加载它们到我的javascript中，图像是最后加载的东西在网页上...关于为什么可能发生的任何想法？ – tmimicus 2013-03-14 00:12:03

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

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，。

来源

2013-03-14 00:59:06

更改图像src添加到资源

回答

相关问题