如何消除背景图片更改时的闪烁问题

Question

我有一个带有图像背景的 <div>。当有人将鼠标悬停在 <div> 上时，我已经设置了这样一个功能：将背景图片更改为其他图片。问题是，在第一次将鼠标悬停在 <div> 上时，由于加载，背景图片会闪烁，并且您会在几毫秒内看不到任何图片。

如何消除这种闪烁？如何在用户实际悬停在 <div> 上之前先加载悬停的图片，以使效果立即出现。

我更改 <div> 背景的代码非常简单：

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

我知道有一种方法是将两个所需的图像放在一个图像中，然后调整背景位置，但这里不是一个选项，因为我总是将背景图像设置为这样:

image-size: 100% 100%;

- kfirba

Answer 1

在window.load()函数中，

• 确保所有图片都加载到页面上。
  FYI - 您可能希望将每个图像的CSS位置设置为绝对位置，Top:0px和Left:0px，全部位于具有position:relative、特定宽度和高度的父div中。

• 如DC_所指出的那样，将display:none设置为不应显示的内容。

• 使用jQuery的hover方法或click方法单击图像。 在您选择的方法函数内，fadeOut()当前图像并fadeIn()与其关联的具有display:none属性的图像。

- klewis

---

如果我使用<img>标签来设置我的div背景而不是使用<div>的background-image属性，那就可以起作用。 - kfirba

它可以用两种方式工作，因此，不要在父相对<div>中设置一堆绝对定位的<img>，而是在父相对<div>容器中设置多个绝对<div>，并fadeOut()当前<div>并fadeIn()您想要查看的<div>。 您只需要确保每个<div>容器与图像本身大小相同即可。 - klewis

确保图像的大小适合div的大小。不错的解决方案！ - kfirba

Answer 2

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

- HellaMad

---

这个解决方案不起作用。我在DOM中设置了一个隐藏的<div>，并将我想要加载的图像设置为当我悬停在<div>上时要加载的相同图像，但第一次悬停在<div>上仍然会闪烁。 - kfirba

@kfirba 你使用的是哪个浏览器？你给它足够的加载时间了吗？你能提供一个示例链接吗？ - HellaMad

我正在使用Google Chrome。我已经用Firefox和IE检查过了，你的解决方案似乎完美地运行了。有什么想法为什么Google Chrome仍然会闪烁吗？也许这是因为Chrome已经将我的网站文件保存在它的内存中，所以它不会加载预加载div？ - kfirba

@kfirba 当您说它闪烁时，确切指的是什么？闪烁持续多久？ - HellaMad

在本地主机上，只需要0.1毫秒？时间非常短，但我不知道在实际服务器上需要多长时间。 - kfirba

尝试使用 opacity:0 替代 display:none; visibility: hidden;，对我来说有效。 - Grzegorz Pawlik

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>

- jpostdesign

Answer 4

我曾经遇到过非常类似的问题。我相信你会发现它与这个有关：cubiq.org/you-shall-not-flicker

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

- Paskainos