如何去除背景图像变化闪烁

Question

我有一个<div>与图像作为背景。我有它，每当有人悬停在<div>，背景图像改变为一些其他的图像。问题是，第一次当你的鼠标悬停在<div>，背景图像闪烁，因为它加载，你看到没有图像几毫秒。

如何删除此闪烁?如何在用户实际悬停在<div>上之前加载悬停图像，使效果立即生效?

我改变<div>背景的代码很简单:

#someID{
    background-image: *image source*;
}
#someID:hover{
    background-image: *Another image source*
}

我知道有一个解决方案，把两个想要的图像放在一个图像中，然后播放背景位置，但这不是一个选项，因为我总是将背景图像设置为这样:

image-size: 100% 100%;

Answer 1

在window.load()函数中，

• 确保所有图片都加载到页面上。
  供参考-你可能想要将每个图像的CSS位置设置为绝对位置，使用Top:0px和Left:0px，所有这些都在父div中，具有position:relative，具有一定的宽度和高度。

• 设置display:none为不应该显示的DC_指出

• 使用jquery的hover方法或click方法来点击的形象。在您选择的方法函数中，fadeOut()()当前图像和

Answer 2

你可以在DOM的某个地方放置一个图像标签，引用你想要预加载的图像，并给它一个display:none; visibility: hidden;的样式。您也可以尝试使用JavaScript预加载解决方案，但它不会那么可靠。

Answer 3

当CSS发生变化并重新加载时，闪烁会发生。你看到的闪烁是在重写CSS所需的微秒内的过渡。

我建议你在另一个背景上叠加你的过渡。闪烁实际上是#someID元素在瞬间完全透明。

伪代码:

#underLayer {
     background-image: *image source*;
}
#someID {
    background-image: *image source*;
}
/* On change for #someID */
#someID:hover {
    background-image: *image source*;
}
<!-- first div acts as a base layer to show underneath during transition flicker -->
<div id="underLayer">
    <div id="someID"> This div changes on hover</div>
</div>

Answer 4

我有一个非常相似的问题。我相信你会发现它与这个有关:cubiq.org/you-shall-not-flicker

简单的解决方案(来自文章):-webkit-transform:translate3d(0,0,0) .