Question

我正在尝试在鼠标悬停时更改元素的背景图片，并且在Chrome浏览器中一切正常。但是在Firefox中，加载页面后，它在第一次悬停时始终会眨眼一秒钟。

我已经预先加载了body:after上需要的图像，并且Firefox中的开发人员控制台显示有一个“ GET”请求来请求该文件。但是，似乎还没有准备好在第一次将鼠标悬停时进行渲染。

这是我预加载图像的方式。

body:after {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    z-index: -1;
    content: url(image.png);
}

我不明白，为什么它在Chrome中可以完美运行，但无论是否预加载，Firefox都会产生首次闪烁。我确实了解图像精灵，但就我而言，这是不可能的。

Answer 1

即使它已经从服务器加载，如果看到一些额外的延迟，我也会将两个图像（堆叠或并排放置）放入一个单独的图像，也就是spritesheet。

然后在悬停时，移动背景位置以显示图像的另一半。

例如，如果每个图像均为50x50，则可以并排制作一张100x50图像。让正常状态仅显示左半部分（通过将元素宽度保持为50且background-position 0 0），然后将背景在悬停时向左滑动50px，以显示右半部分：

background-position: -50px 0;