用另一个图像替换时避免悬停时出现图像闪烁(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'