背景變化徘徊

在這裏，我有一個網站，我正在編碼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; 
});

來源

2013-10-19 Jepser Bernardino

您應該製作一個包含所有圖像和懸停狀態的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/

來源

2013-10-19 20:30:56 bmullan91

背景變化徘徊

回答

相關問題