[英]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%;
您可以在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.