javascript - 网页 : background blink

Question

我必须根据鼠标悬停事件更改背景图片。

$("#videoLanceur").mouseenter(function() {
    $("body#homebg").css("background-image", "url(img/home-labtop-clean-playerhovered.jpg)");
})
$("#videoLanceur").mouseleave(function() {
    $("body#homebg").css("background-image", "url(img/home-labtop-clean-player.jpg)");
})

它工作正常，但是......在第一次鼠标悬停时，背景闪烁。我猜是因为它必须加载图像。

所以我决定预加载图像。

HTML :
<div id="hiddenPreloadedBgImage">
  <img src="img/home-labtop-clean-playerhovered.jpg" />
</div>

CSS :
#hiddenPreloadedBgImage {
    visibility: hidden;
    position: absolute;
    left: -500%;
    top: -500%;
}

我很高兴，它在 chrome 上运行良好，但在 firefox 和 internet explorer 上都不是(即 11 对我来说足够了)

我来了，你们有什么想法吗？

Answer 1

定义两个具有两种背景的不同 Div:

<div id="id1">
 <img src="http://www.osmobot.com/wp-content/uploads/2013/10/1379369265_Google_2.png" />
</div>

<div id="id2">
  <img src="http://www.truckcentrewa.com.au/wp-content/uploads/2014/02/Google+-150x150.png" />
</div>

将一个的 css 设置为隐藏，将一个设置为可见:

#id1 {
 display:none;
 position: absolute;
}
#id2 {
 display:block;
 position: absolute;

}

#id1 img{
 width:300px;
 height:300px;
}

#id2 img{
 width:300px;
 height:300px;
}

并显示一个删除另一个:

jQuery("#id1").mouseenter(function() {
  jQuery("#id1").css("display","none");
  jQuery("#id2").css("display","block");
});

jQuery("#id2").mouseleave(function() {
  jQuery("#id2").css("display","none");
  jQuery("#id1").css("display","block");
});

编辑:http://jsfiddle.net/9afmxxad/

测试代码