logo标签列表

如何预加载CSS中的:hover背景图片

csspreload
4

我有多张背景图片，在悬停时会更换。

例子：

.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，都无所谓。
您可以在<head>中添加 <link rel=preload as=image href="img/img-2.jpg">，但目前该功能尚未完全支持。 - Danield
尝试过了，没有效果，至少对Safari和Firefox来说是这样。你确定它适用于背景图片吗？或者可能只是因为像你所说的那样，它并没有完全支持。不过还是谢谢。 - kreakiwi
https://caniuse.com/#search=preload - Safari（11-）和Firefox都不支持rel =“preload”-如果您在Chrome中尝试此操作，应该会看到此操作正常工作。 - Danield
6个回答
6
我刚试了一下，对我来说好像不起作用。不过我没有把它放在头部。每页有两张图片，我不想把所有的图片都放在header.php中，所以我把其中两张图片放在index.php中（等等）。看不出有什么区别。 - kreakiwi
这取决于你的图片有多大。如果它们非常重，你需要使用一些慢速连接来查看在预取和未预取页面加载时的差异。还需要禁用缓存（或在每次尝试之前清除缓存）。如果你的连接很好而且图片不是很重，你将不会注意到任何差异。 - kakaja
它适用于任何类型的图像（背景或非背景）。其思想是浏览器将图像缓存在其缓存中，并在需要时更快地呈现它：作为背景或图像标签。 - kakaja
我认为你的图片闪烁还有其他原因，它们并不占用很多资源，尤其是每页只有两张图片的情况下。所以提出的解决方案对此没有影响。我建议您使用 CodePen（https://codepen.io/ -> Create -> New Pen）创建一个演示样例，这样我们可以找到问题所在。 - kakaja
是的，可能是这样... 我不想分享代码，所以我猜它没有帮助。非常感谢你的帮助！ - kreakiwi
显示剩余4条评论
1
我使用了以下技术：

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

我将所有带有-hover-preload类的元素添加到一个高度为0的容器中。这样，我可以将预加载器的路径定义保留在与元素相同的位置（CSS本身），以便如果它们被更改为悬停状态，预加载不会被破坏。
1

我知道这可能是一个晚回答，但这是我发现的最简单的解决方案：只需添加带有所需背景图像的不可见::before伪元素，例如：

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

这样它将预加载图像。如果您使用SASS，那么更容易，因为您可以为此创建一个简单的mixin。

0

我通过为图片制作两个容器(而不是仅有一个)，隐藏其中一个(鼠标悬停时的那个)，并让它们在:hover时混合。现在它可以工作了。

我仍然不知道为什么其他解决方案都没有起作用，这很遗憾，但至少现在它可以工作了。

0
我发现最好的方法（在Mac上测试了Firefox和Chrome），是使用opacity: 0来绘制图像，就像这样：
&::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    background: url(image.png);
}

但它仍然不是100％可靠的。在Safari中，它仍然经常闪烁。

-2
你可以尝试强制浏览器通过将其包含在页面的HTML中下载div，但样式设置为不可见。

例如：

CSS

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

HTML

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

您可能需要做一些额外的工作来防止图像显示或影响浏览器窗口的可见性，但基本思想应该是清晰的。

谢谢您的回答，我已经尝试过了，但是没有任何改变。在这里找到类似的答案，但我认为它不适用于CSS背景图片。 - kreakiwi
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接