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; } 

这样做的最好方法就是将图像插入网页并将显示设置为无。