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位置设置为绝对值，顶部：0px和左：0px，所有这些都在父div中，其位置为：relative，具有一定的宽度和高度。
将display：none设置为不应显示为DC_指出的
使用jquery的hover method或click method点击图片。在你选择的方法函数中，fadeOut（）当前的imag和 fadeIn（）具有display：none的图像。

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)。

如何删除背景图像更改闪烁

4 个答案: