Question

我有多个背景图片在悬停时会发生变化。

示例：

.class1 {
    background: url(/img/img-1.jpg) no-repeat top center;
}
.class1:hover {
    background: url(/img/img-2.jpg) no-repeat top center;
}

图像现在闪烁，因为它们是在你将鼠标悬停在它们上面时加载的。我尝试过使用精灵，但这不起作用，因为图像会改变移动设备的大小。

有什么想法吗？可能是css或jquery，并不重要

Answer 1

您可以在<head>标记中使用HTML5链接预取：

<link rel="prefetch" href="/img/img-1.jpg" />

信息在这里：https://developer.mozilla.org/en-US/docs/Web/HTTP/Link_prefetching_FAQ

Answer 2

您可以尝试强制浏览器下载div，方法是将其包含在页面的html中，但设置风格以便不显示。

例如：

<强> CSS

.hidden-images {
  position:absolute;
  left:-9999px;
}

<强> HTML

<div class="hidden-images">
    <img src="/img/img-2.jpg" alt="" />
</div>

您可能需要做更多的工作来防止图像被显示或明显影响浏览器窗口，但希望基本的想法是明确的。

Answer 3

我通过为图片制作两个容器（而不是之前只有一个）解决了这个问题，隐藏了其中一个（悬停的一个），并将它们混合在一起：悬停。它现在有效。我仍然不知道为什么其他解决方案都没有工作，这很难过，但是，至少它现在正在工作。

Answer 4

我使用了以下技术：

.class1:hover,
.class1-hover-preload {
    background: url(/img/img-2.jpg) no-repeat top center;
}

并将带有-hover-preload类的元素添加到我的html中，放入0高度的容器中。这样，我将预加载器的路径定义保持在与元素相同的位置（CSS本身），这样如果它们被更改为悬停，预加载就不会被破坏。

Answer 5

我知道这可能是一个迟到的答案，但这是我发现的最简单的解决方案：只需在假元素之前添加隐形::所需的背景图像，即：

element::before {
  position: absolute;
  width: 0;
  height: 0;
  background: url(image_name);
  content: '';
}

所以它会预加载图像。如果你使用SASS，它会更容易，因为你可以为此创建一个简单的mixin。

Answer 6

我发现可行的最佳方法（在Firefox和Mac上的Chrome中进行了测试）是用不透明度0绘制图像，如下所示：

&::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    background: url(image.png);
}

它仍然不是100％可靠。在Safari中，它仍然会闪烁很多。

如何预加载css：悬停背景图像

6 个答案: