我有一个链接，该链接以一个背景图片开始，然后在悬停时更改为另一个。两个背景图像均在CSS中设置。我的浏览器（其中的任何一个）在您真正进行悬停之前似乎都不会加载悬停图像。但是随后，在加载新图像所需的几秒钟时间内（在我的连接非常慢的情况下），您将得到空白图像。有没有一种方法可以鼓励浏览器预加载悬停图片，以免悬停发生延迟时间？

#1 楼

1）使用CSS Sprites（这是首选方法）。

2）将图像加载到隐藏的div中。将图像放在div中，然后将div的CSS设置为display: none;以将其隐藏。

3）使用CSS加载图像：

#preloadedImages
{
    width: 0px;
    height: 0px;
    display: inline;
    background-image: url(path/to/image1.png);
    background-image: url(path/to/image2.png);
    background-image: url(path/to/image3.png);
    background-image: url(path/to/image4.png);
    background-image: url();

}


4）使用此JavaScript 

<script language="JavaScript">

function preloader() 
{
     // counter
     var i = 0;

     // create object
     imageObj = new Image();

     // set image list
     images = new Array();
     images[0]="image1.jpg"
     images[1]="image2.jpg"
     images[2]="image3.jpg"
     images[3]="image4.jpg"

     // start preloading
     for(i=0; i<=3; i++) 
     {
          imageObj.src=images[i];
     }
}
</script>


评论

页面加载后是否可以加载它们？这样用户在光标上看不到加载圆圈吗？一种方式是拥有一个使用JavaScript的隐藏框架来延迟要显示的隐藏框架，例如在我的问题stackoverflow.com/questions/13437091/…中，但是有一种用于延迟而不在该光标上显示加载圆圈的首选方法？

–反对
13年1月4日在17:12
没关系，我发现了这个perishablepress.com/3-ways-preload-images-css-javascript-ajax，它可以完美地工作并具有时间延迟。

–反对
2013年1月4日19:27

#2 楼

我不太喜欢javascript解决方案-它很杂乱，难以维护，并且当禁用JS时当然会完全失败。

现代的解决方案是使用CSS Sprites-试试吧，相信我，您会想知道为什么以前从未这样做过；）

#3 楼

我找到了有关如何使用纯CSS预加载图像的链接：

http://www.thecssninja.com/css/even-better-image-preloading-with-css2

当我需要在悬停时更改不同的背景图像时，它对我有用。

评论

它可以很好地与Safari和Chrome配合使用，但在2020年仍无法在Firefox上运行。

– Chewie The Chorkie
20 Mar 12 '20 at 20:11

#4 楼

将此内容添加到CSS上方：

<script type="text/javascript">
var images = ['img1.jpg', 'img2.jpg'];

for(var i = 0, len = images.length; i < len; i++) {
  new Image().src = images[i];
}
</script>
<link rel="stylesheet" type="text/css" href="your_css_file.css" />


如果您选择精灵路线，因为danp建议您在需要之前加载精灵仍然存在问题。那就是我爱精灵；为了轻松制作它们，我使用了Steve Souders的Spriteme工具：