CSS背景预加载

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

2013-03-24 ofer dofer

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

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

浏览器将使用它的缓存为捕捉相同的图像加载当你把它的背景下，这样刻不容缓。

来源

2013-03-24 11:47:54

如果是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

来源

2013-03-24 11:54:10 bukka

是不是，在这两种情况下，图像还只是浏览器中加载的媒体缓存？不错，你如何展示这些方法，但是网页共享同一个加载环境中的所有文件，因此无需使用偏移量将其设置在某处。在某些浏览器中，这些负偏移将无法正常工作，或者甚至将背景推回索引0，从而产生不需要的结果。 – 2013-03-24 12:05:28

CSS背景预加载

回答

相关问题