0

I have a hover element, when I mouseover it, the background image changes. This is fine, but it loads the image just when I mouseover it, not before, and I see blank box for a short while. How do I preload the images?

4

2 回答 2

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; }

资料来源：

Fatih Hayrioğlu 回答的重复问题

CSS 技巧

于 2013-03-24T11:54:10.930 回答
2

在你的身体开始，加载隐藏的图像：

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

当您调用它时，浏览器将使用它的缓存来捕获相同的图像作为背景加载，因此不会延迟。

于 2013-03-24T11:47:54.710 回答