如何停止圖像閃爍，因爲他們改變了懸停

下面是我使用的交換圖像進行onmouseover的代碼，但因爲之前它加載的新形象，它迅速閃爍，顯示div的背景色：

JS：

function chbg(img) { 
    document.getElementById('navholder').style.backgroundImage = 'url('+img+')'; 
}

HTML：

<a href="index.html"><div id="button1" onmouseover="chbg('http://placehold.it/300x250')" onmouseout="chbg('http://placehold.it/950x350')"><div id="triangle"></div><div id="buttonname">Home</div></div></a>

來源

2013-12-20 man

是的。 [預載你的圖片]（http://stackoverflow.com/questions/8504764/preload-images）。 – Andy

啊輝煌，我認爲是這樣，但我不知道如何去做。我會檢查出 – man

試試這個方法

var arrayOfImages = [ 
    'img/imageName.jpg', 
    'img/anotherOne.jpg', 
    'img/blahblahblah.jpg' 
]

實際上將圖像加載到DOM並默認隱藏它。

function preload(arrayOfImages) { 
    $(arrayOfImages).each(function() { 
     $('<img />').attr('src',this).appendTo('body').css('display','none'); 
    }); 
}

來源

2013-12-20 11:20:34

n.b.需要jQuery。 – Tim

當我使用這段代碼時，圖像仍然在閃爍......即使在我的小提琴中使用jQuery – man

不閃爍chk fiddle http://jsfiddle.net/YShs2/152/ –

試試這個小提琴fiddle

1.-棧無形的div在原始背景

<div id="button1_related"></div> 
<div id="button2_related"></div>

2：鼠標懸停/鼠標移開顯示/隱藏div的，沒有圖像加載（和不閃爍）

function nowshow(id) { 
    document.getElementById(id+'_related').style.display = 'block'; 
} 
function nowhide(id) { 
    document.getElementById(id+'_related').style.display = 'none'; 
}

3.- ...並且您控制了CSS中的img。

#button1_related{ 
position:absolute;display:none; 
top:0;left:0;width:100%;height:100%; 
background-image: url('http://placehold.it/300x250'); 
} 
#button2_related{ 
position:absolute;display:none; 
top:0;left:0;width:100%;height:100%; 
background-image: url('http://placehold.it/340x150'); 
}

來源

2013-12-20 13:49:32

-1

使用CSS

#button1 { 
    background-image:url('<!-- Your url here-->'); 
} 
#button1:hover { 
    background-image:url('<!-- Your url here-->'); 
}

使用精靈的鼠標經過圖像。這將取消任何閃光，並將節省HTTP請求，使您的網站更快：

http://spritepad.wearekiss.com/

來源

2013-12-20 13:58:30 user2867973

這不會改變另一個div，只有button1的背景。 – man

如何停止圖像閃爍，因爲他們改變了懸停

回答

相關問題