7

我有<div>一个图像作为背景。我有它，所以每当有人将鼠标悬停在 上时<div>，背景图像都会更改为其他图像。问题是，当您的鼠标第一次悬停在 上时<div>，背景图像在加载时会闪烁，并且您在几毫秒内看不到任何图像。

如何消除这种闪烁？如何在用户实际悬停之前加载悬停图像，<div>以便立即生效。

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

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

我知道有一个解决方案，将两个所需的图像放在一个图像中，然后使用背景位置进行播放，但这不是一个选项，因为我总是将背景图像设置为这样：

image-size: 100% 100%;
4

4 回答 4

5

在 window.load() 函数中，

  • 确保所有图像都加载到页面上。
    仅供参考-您可能希望将每个图像的 CSS 位置设置为绝对位置，顶部：0px 和左侧：0px，所有这些都在具有位置的父 div 中：相对，具有一定的宽度和高度。

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

  • 使用jquery的hover方法或者click方法点击图片。在您选择的方法函数中，fadeOut() 当前图像和 fadeIn() 与 display:none 关联的图像。

于 2013-03-09T20:20:57.360 回答
3

您可以在 DOM 中的某处放置一个图像标签，引用您要预加载的图像，并为其赋予display:none; visibility: hidden;. 您也可以尝试使用 JavaScript 预加载解决方案，但它不会那么可靠。

于 2013-03-09T20:08:08.590 回答
1

当 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>
于 2014-01-10T19:10:56.840 回答
0

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

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

于 2014-08-08T07:17:36.670 回答