Question

我有一个悬停元素，当我鼠标悬停时，背景图像会发生变化。这很好，但它只是在鼠标悬停时加载图像，而不是之前，我看到空白框一会儿。如何预加载图像？

Answer 1

在您身体的开头，加载隐藏的图片：

<body>
    <img src="myimage.png" style="display: none;" />
</body>

当你调用它时，浏览器将使用它的缓存来捕获同一个图像作为背景加载，因此没有延迟。

Answer 2

如果是background-image，那么您可以使用以下技术之一：

技术＃1

将图像加载到元素的常规状态，仅将其移出背景位置。然后移动背景位置以在悬停时显示它。

#grass { background: url(images/grass.png) no-repeat -9999px -9999px; }
#grass:hover { background-position: bottom left; }

技术＃2

如果相关元素已经应用了背景图像，并且您需要更改该图像，则上述功能无法正常工作。通常你会在这里寻找一个精灵（合成的背景图像），然后移动背景位置。但如果这是不可能的，试试这个。将背景图像应用于已在使用的另一个页面元素，但没有背景图像。

#random-unsuspecting-element { background: url(images/grass.png) no-repeat -9999px -9999px; }
#grass:hover { background: url(images/grass.png) no-repeat; }

来源：

Duplicate Question answered by Fatih Hayrioğlu

CSS-Tricks

CSS后台预加载

2 个答案: