更改图像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的开发者工具)。有没有办法来防止这种情况发生?
在此先感谢您检查这篇文章。
答
而不是更改源地址创建两个图像元素,一个用于默认图像,另一个用于隐藏图像,并且简单地切换悬停事件触发时哪个图像元素可见。
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();
});
});
顺便说一句,你也可以只使用css,。
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