背景变化徘徊

Question

在这里，我有一个网站，我正在编码www.startingcanvas.com，我添加了一些背景图标，你会在那里，悬停的图标，背后的背景变化。

问题是首先在每个图标上悬停，背景闪烁。我认为这是因为图像加载。

但我尝试了一些方法来预加载图像：

把它们在显示：无格：

<div style="display:none"> 
    <img src="images/myimage1.jpg" /> 
    <img src="images/myimage2.jpg" /> 
    <!-- etc... --> 
</div> 

而一个使用javascript：

for(var i = 0; i < to.icons.length; i++){ 
    new Image().src = to.icons[i].bg; 
    //console.log(to.icons[i].bg); 
} 

无解，有什么想法，这里是我的javascript代码：

$('.bussiness-icons li').hover(function(){ 
    var id = $(this).data('id'); 
    var bg = $('#' + id).attr('src'); 

    $('.icon-templates').css('background', 'url(' + bg +')'); 
}, function(){ 
    return; 
}); 

Answer 1

您应该制作一个包含所有图像和悬停状态的CSS精灵图像。例如，如果您的图标是50x50像素，我们将“悬停”图标直接放置在其下方 - 那么在我们的css上：元素悬停处，我们只是“推”背景位置以显示“悬停”图像。

#icon-one { 
    background: url('<Sprite url>'); 
} 

#icon-one:hover { 
    background-position: <x position>0px <y position>-50px; 
} 

如果将所有图像捆绑到一个文件中，这还可以节省http请求！ Chris Coyier曾在CSS Sprites上做过一篇文章：http://css-tricks.com/css-sprites/