当我在页面加载后第一次将光标悬停在徽标上时，它开始快速闪烁大约一秒钟。
我考虑过使用精灵，但我不想将徽标设置为背景图像 - 我已经有了一个。这是我的 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%;
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>
这里将always会有些闪烁，因为用户的浏览器必须从服务器加载图像。 TCP 和 HTTP 有一定的开销，并且fastest您可以合理地预期（即使对于非常小的图像）大约为 100-200 毫秒。这通常是显而易见的。事实上，时间往往更长。
可能的解决方案：
- 将图像放置在页面中的某个位置，但不显示它。环境
display: none经常被使用，但是这似乎不再可靠 http://blog.futtta.be/2012/12/10/do-background-images-lazy-load-with-displaynone/;或者，您可以添加带有width & height of 1px and z-index of -1。恕我直言，这很丑陋。请注意，这也会增加初始页面加载。
-
不要使用 CSS，而是使用 Javascript 来切换图像。这样您可以预加载图像，并在加载和准备好时更改它，例如：
var img = new Image();
img.onload = function() {
$('#logo').attr('src', $(this).attr('src'));
};
img.src = 'example.com/image'
使用 CSS 精灵，您已经提到过您不想这样做，但为了完整起见，我将列出它。恕我直言，这是最好的解决方案。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
