css：避免图像hover第一次闪烁
当有一个包含background-image的类class-btn ，我有一个锚点改变了它的背景background-image 。
徘徊时，它已经
a.class-btn:hover { background-image('path/to/image-hovered.jpg'); }
第一次加载页面时，首次将该buttonhover时，该button会闪烁（下载保留的图像大约需要半秒钟的时间）。 如何避免没有JavaScript的闪烁（只允许简单的CSS和HTML）？
我试图search堆栈溢出的类似的问题，但没有运气。
刚刚添加：
- 我应该“预加载”hover的图像吗？ 怎么样？
- 我应该玩Z指数还是不透明？
它发生在所有的浏览器，因此该解决scheme应该适用于所有的浏览器。
避免这种情况的最简单的方法是利用图像精灵。 为了一个好的概述，请查看这个CSS技巧文章 。
这样，你不仅可以解决你所看到的闪烁问题，还可以减lessHTTP请求的数量。 你的CSS看起来像这样：
a.class-btn { background: url('path/to/image.jpg') 0 0 no-repeat; } a.class-btn:hover { background-position: 0 -40px; }
具体将取决于您的图像。 您还可以使用在线精灵生成器来简化过程。
这是一个简单而有效的CSS图像预加载技术，我已经使用了几次。 您可以通过放置内容来加载多个图像：url（）url（）url（）…等等
body:after{ display:none; content: url(path/to/image-hovered.jpg) url(path/to/another-image-hovered.jpg); }
我使用的一个简单的技巧是将原始背景图像翻倍，确保首先放置图像
.next { background: url(..http://img.dovov.comnext-hover.png) center center no-repeat; background: url(..http://img.dovov.comnext.png) center center no-repeat; &:hover{ background: url(..http://img.dovov.comnext-hover.png) center center no-repeat; } }
没有性能影响，非常简单
或者如果你还没有使用SCSS：
.next { background: url(..http://img.dovov.comnext-hover.png) center center no-repeat; background: url(..http://img.dovov.comnext.png) center center no-repeat; } .next:hover{ background: url(..http://img.dovov.comnext-hover.png) center center no-repeat; }
如果你这样做：
#the-button { background-image: url('images/img.gif'); } #the-button:before { content: url('images/animated-img.gif'); width:0; height:0; visibility:hidden; } #the-button:hover { background-image: url('images/animated-img.gif'); }
这将真的帮助！
看这里：
http://particle-in-a-box.com/blog-post/pre-load-hover-images-css-only
PS – 不是我的工作，但我find了一个解决scheme:)
这是一个非CSS的解决scheme：如果hover图像位于一个目录中并且具有通用命名约定，例如包含子string“-on。”，则可以select文件名并将其作为系列：
<img src='...' style='display: none' />
@克里斯蒂安的方法应用隐藏的“内容：url（）”身体似乎没有在Firefox 48.0（OS X）的工作。
但是，更改“显示：无” 像这样的东西：
body:after { position: absolute; overflow: hidden; left: -50000px; content: url(/path/to/picture-1.jpg) url(/path/to/picture-2.jpg); }
…为我做了诡计。 也许Firefox不会加载隐藏的图像，或者它可能与渲染（？）有关。
如果它们具有相同的尺寸，则有一种可能性是将两个图像直接叠加在一起，CSS :hover类为顶部图像display: none;
这样，两个图像都将被预加载，但是hover会使第二个图像可见。
您可以预载图像
function preloadImages(srcs, imgs, callback) { var img; var remaining = srcs.length; for (var i = 0; i < srcs.length; i++) { img = new Image(); img.onload = function() { --remaining; if (remaining <= 0) { callback(); } }; img.src = srcs[i]; imgs.push(img); } } // then to call it, you would use this var imageSrcs = ["src1", "src2", "src3", "src4"]; var images = []; preloadImages(imageSrcs, images, myFunction);
“原来的背景图像双倍”技巧并没有为我工作，所以我用另一个CSS技巧：
.next { background: url(..http://img.dovov.comnext.png) center center no-repeat; } .next:hover { background: url(..http://img.dovov.comnext-hover.png) center center no-repeat; } .next:after { content: url(..http://img.dovov.comnext-hover.png); display: none; }
只是改变背景图像的大小，而不是它的来源！ 所以…
a.class-btn { background-image: url('path/to/image-hovered.jpg'); background-size: 0; } a.class-btn:hover { background-size: auto; }
这样做的最好方法就是将图像插入网页并将显示设置为无。
