用另一个图像替换时避免悬停时出现图像闪烁（CSS） [英] Preventing image flicker on hover when replacing it with another image (CSS)
问题描述
在页面加载后第一次将光标悬停在徽标上时，它会快速闪烁约一秒钟。
我曾考虑过使用精灵，但我不想将徽标设置为背景图片 - 我已经有了。这是我的CSS代码：
<！DOCTYPE HTML>
< head>
< style>
html {
background-image：url（'backgroundimage.jpg'）;
-webkit-background-size：100％;
-moz-background-size：100％;
-o-background-size：100％;
background-size：100％;
-webkit-filter：brightness（0.6）;
-moz-filter：brightness（0.6）;
-o-filter：brightness（0.6）;
-ms-filter：brightness（0.6）;
}
#logo {
position：fixed;
top：50％;
剩下：50％;
margin-top：-250px;
margin-left：-250px;
#logo：hover
{
content：url（'logobeforehover.png'）;
}
< / style>
< / head>
< body>
< div id =logo>
< img src =logoafterhover.png/>
< / div>
< / body>
< / html>
一些闪烁，因为用户的浏览器将不得不从服务器加载图像。 TCP& HTTP有一定的开销，而且你可以合理地期望的最快（即使是非常小的图像）大约是100-200ms。这通常是显而易见的。实际上，时间往往更高。 可能的解决方案： 不要使用CSS，而是使用Javascript来切换图像。这样，您可以预加载图像，并在加载图像时进行更改。准备好，例如： 使用CSS精灵，你已经提到你不想这样做，但我会列出来完成。恕我直言，这是最好的解决方案。 When I hover my cursor on the logo the first time after the page loads, it starts to blink rapidly for about a second.
I've thought about using sprites, but I don't want to set the logo as the background image - I already have one. Here's my CSS code:
There will always be some flicker, since the user's browser will have to load the image from the server. TCP & HTTP have some amount of overhead, and the fastest you can reasonably expect (even for very small images) is about 100-200ms. Which is often noticeable. In reality, the time is often higher. Possible solutions: Don't use CSS, but Javascript to switch the image. This way you can pre-load the image, and change it when it's loaded & ready, for example: Use a CSS sprite, you already mentioned you don't want to do that, but I'll list it for completion's sake. IMHO, it is the best solution. 这篇关于用另一个图像替换时避免悬停时出现图像闪烁（CSS）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
display：none ，但这似乎不再可靠了;或者，您可以使用宽度& <$ c z-index 的 height 1px
var img = new Image（）;
img.onload = function（）{
$（'＃logo'）。attr（'src'，$（this）.attr（'src'））;
};
img.src ='example.com/image'
<!DOCTYPE HTML>
<head>
<style>
html {
background-image:url('backgroundimage.jpg');
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
-webkit-filter: brightness(0.6);
-moz-filter: brightness(0.6);
-o-filter: brightness(0.6);
-ms-filter: brightness(0.6);
}
#logo {
position: fixed;
top: 50%;
left: 50%;
margin-top: -250px;
margin-left: -250px;
}
#logo:hover
{
content: url('logobeforehover.png');
}
</style>
</head>
<body>
<div id="logo">
<img src="logoafterhover.png"/>
</div>
</body>
</html>
display: none is often used, but that doesn't seem reliable anymore; alternatively, you can add an image with a width & height of 1px and z-index of -1. IMHO this is ugly. Note that this also increases initial page load.var img = new Image();
img.onload = function() {
$('#logo').attr('src', $(this).attr('src'));
};
img.src = 'example.com/image'
