Html css：避免图像悬停第一次闪烁
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13286745/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
css: avoid image hover first time blinking
提问by Haradzieniec
I have an anchor that changes its background image when hovered with a class class-btnthat contains a background-image.
我有一个锚点，当悬停在一个class-btn包含background-image.
When hovered, it has
悬停时，它有
a.class-btn:hover
{
background-image('path/to/image-hovered.jpg');
}
When the page loads the first time and you hover this button the first time, it blinks (it takes about half a second to download the hovered image). How to avoid that blinking without JavaScript (only simple css and html is allowed)?
当页面第一次加载并且您第一次悬停此按钮时，它会闪烁（下载悬停的图像大约需要半秒钟）。如何在没有 JavaScript 的情况下避免闪烁（只允许简单的 css 和 html）？
I tried to search Stack Overflow for the similar question, but with no luck.
我试图在 Stack Overflow 上搜索类似的问题，但没有运气。
Just added:
刚刚添加：
- Should I "preload" the hovered image? How?
- Should I play with z-index or opacity?
- 我应该“预加载”悬停的图像吗？如何？
- 我应该使用 z-index 还是 opacity？
It happens with all browsers and thus the solution should work for all browsers.
它适用于所有浏览器，因此该解决方案应该适用于所有浏览器。
回答by Kristian Svensson
Here is a simple and effective css image preloading technique I have used several times. You can load several images by placing content: url() url() url()... etc.
这是我使用过多次的简单有效的 css 图像预加载技术。您可以通过放置内容来加载多个图像： url() url() url()... 等。
body:after{
display:none;
content: url(path/to/image-hovered.jpg) url(path/to/another-image-hovered.jpg);
}
回答by CherryFlavourPez
The easiest way to avoid this is to make use of image sprites. For a good overview, check out this CSS Tricks article.
避免这种情况的最简单方法是使用图像精灵。如需全面了解，请查看这篇 CSS 技巧文章。
That way, you not only solve the flicker problem you're seeing, but will also reduce the number of HTTP requests. Your CSS will look something like:
这样，您不仅可以解决所看到的闪烁问题，还可以减少 HTTP 请求的数量。您的 CSS 将类似于：
a.class-btn { background: url('path/to/image.jpg') 0 0 no-repeat; }
a.class-btn:hover { background-position: 0 -40px; }
The specifics will depend on your images. You can also make use of an online sprite generatorto make the process easier.
具体将取决于您的图像。您还可以使用在线精灵生成器来简化该过程。
回答by Callam
A simple trick I use is to double up the original background image making sure to put the hovered image first
我使用的一个简单技巧是将原始背景图像加倍，确保首先放置悬停图像
.next {
background: url(../images/next-hover.png) center center no-repeat;
background: url(../images/next.png) center center no-repeat;
&:hover{
background: url(../images/next-hover.png) center center no-repeat;
}
}
No performance hit and very simple
没有性能影响，非常简单
Or if you're not using SCSS yet:
或者，如果您还没有使用 SCSS：
.next {
background: url(../images/next-hover.png) center center no-repeat;
background: url(../images/next.png) center center no-repeat;
}
.next:hover{
background: url(../images/next-hover.png) center center no-repeat;
}
回答by Benjamin Dordoigne
If you do this:
如果你这样做：
#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');
}
This will really help!
这真的很有帮助！
See here:
看这里：
http://particle-in-a-box.com/blog-post/pre-load-hover-images-css-only
http://particle-in-a-box.com/blog-post/pre-load-hover-images-css-only
P.S - not my work but a solution I found :)
PS - 不是我的工作，而是我找到的解决方案:)
回答by Martin Staufcik
This is a non-CSS solution: if the hover images are in one directory and have a common naming convention, for example contain a substring '-on.', it is possible to select the file names and put it into the HTML as a series of:
这是一种非 CSS 解决方案：如果悬停图像在一个目录中并且具有共同的命名约定，例如包含子字符串“-on.”，则可以选择文件名并将其作为系列：
<img src='...' style='display: none' />
回答by hdscp
@Kristian's method of applying hidden 'content: url()' after the body didn't seem to work in Firefox 48.0 (OS X).
@Kristian 在主体之后应用隐藏的 'content: url()' 的方法在 Firefox 48.0 (OS X) 中似乎不起作用。
However, changing "display: none;" to something like:
但是，更改“显示：无；” 类似于：
body:after {
position: absolute; overflow: hidden; left: -50000px;
content: url(/path/to/picture-1.jpg) url(/path/to/picture-2.jpg);
}
... did the trick for me. Perhaps Firefox won't load hidden images, or maybe it's related to rendering(?).
......为我做的伎俩。也许 Firefox 不会加载隐藏的图像，或者它可能与渲染（？）有关。
回答by Colin James Firth
This technique works nicely for me and ensures not only is the hover image pre-loaded, but it's also ready and waiting to be displayed. (Most other solutions rely on switching the background image on hover, which just seems to take the browser a bit of time to figure out, however much the image is pre-loaded.)
这种技术对我来说效果很好，不仅可以确保预加载悬停图像，而且还可以准备好并等待显示。（大多数其他解决方案依赖于在悬停时切换背景图像，这似乎需要浏览器花一些时间来弄清楚，无论图像是预加载的。）
Create :before and :after pseudo elements on the container with the two images, but hide the one you want to see on hover. Then, on hover, switch the visibility.
在带有两个图像的容器上创建 :before 和 :after 伪元素，但隐藏您想在悬停时看到的那个。然后，在悬停时，切换可见性。
So long as they both share the same size and positioning rules, you should see a neat swap.
只要它们共享相同的大小和定位规则，您应该会看到一个整洁的交换。
.image-container {
&:before { display: block; background-image: url(uncovered.png); }
&:after { display: none; background-image: url(uncovered.png); }
}
.image-container:hover {
&:before { display: none; }
&:after { display: block; }
}
回答by asc99c
If they are the same dimensions, one possibility is to draw the two images directly on top of each other, with the CSS :hoverclass for the top image having display: none;
如果它们的尺寸相同，一种可能性是直接在彼此之上绘制两个图像，:hover顶部图像的 CSS类具有display: none;
This way both images will be preloaded, but hovering will make the second visible.
这样两个图像都将被预加载，但悬停会使第二个图像可见。
回答by Anshuman Jasrotia
You can preload images
您可以预加载图像
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);
回答by Nailgun
The "double up the original background image" trick didn't work for me so I used another css trick:
“将原始背景图像加倍”技巧对我不起作用，所以我使用了另一个 css 技巧：
.next {
background: url(../images/next.png) center center no-repeat;
}
.next:hover {
background: url(../images/next-hover.png) center center no-repeat;
}
.next:after {
content: url(../images/next-hover.png);
display: none;
}
