繁体   English   中英

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

[英]How to remove background image change flicker

我有一个<div> ,图像作为背景。 我有它,所以当有人在<div>盘旋时,背景图像会变为其他图像。 问题是,当您的鼠标第一次悬停在<div> ,背景图像会在加载时闪烁,并且您看不到几毫秒的图像。

如何删除此闪烁? 如何在用户实际悬停在<div>之前加载悬停图像,以便立即生效。

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

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

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

image-size: 100% 100%;

在window.load()函数中,

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

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

  • 使用jquery的悬停方法单击方法单击图像。 在你选择的方法函数中,fadeOut()当前的图像和fadeIn()具有display:none的图像。

您可以在DOM中的某个位置放置一个图像标记,引用要预加载的图像,并为其提供一种display:none; visibility: hidden;样式display:none; visibility: hidden; display:none; visibility: hidden; 您也可以尝试使用JavaScript预加载解决方案,但它不会那么可靠。

当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>

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

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM