在 Firefox 或 Edge 中从缓存中预加载图像的问题

Question

我有一个网页，它在鼠标悬停时更改元素的 background-image url（使用 :hover css 伪类）。

.myClass {
  width: 100px;
  height: 100px;
  background-repeat: no-repeat;
  background-image: url("a-icon.png");
  background-size: 100px;
}

.myClass:hover {
  background-image: url("b-icon.png");
}

为了避免浏览器第一次获取“热”图像时出现闪烁，我使用以下 JavaScript 代码来预加载图像：

(new Image()).src = hotImgUrl;

这适用于 Firefox 和 Edge如果他们还没有图像的缓存版本（即在第一次访问时）。 但是，如果您在浏览器缓存图像后重新加载页面，它就不再起作用，并且当您将鼠标悬停在图像上时会出现闪烁。

Chrome 和 Safari 没有这个问题。

我在下面创建了一个示例，它显示了问题。

//pre-load hot image:
(new Image()).src = "http://icons.iconarchive.com/icons/iconexpo/speech-balloon-orange/128/speech-balloon-orange-b-icon.png";

.myClass {
  width: 100px;
  height: 100px;
  background-repeat: no-repeat;
  background-image: url('http://icons.iconarchive.com/icons/iconexpo/speech-balloon-orange/128/speech-balloon-orange-a-icon.png');
  background-size: 100px;
}
.myClass:hover {
  background-image: url("http://icons.iconarchive.com/icons/iconexpo/speech-balloon-orange/128/speech-balloon-orange-b-icon.png");
}

<div class="myClass"></div>

这是 Firefox/Edge 的错误吗？还是我以错误的方式解决这个问题？任何帮助将不胜感激！

Answer 1

试试这个：

//pre-load hot image:
(new Image()).src = "http://icons.iconarchive.com/icons/iconexpo/speech-balloon-orange/128/speech-balloon-orange-b-icon.png";

.myClass {
  width: 100px;
  height: 100px;
  background-repeat: no-repeat;
  background-image: url('http://icons.iconarchive.com/icons/iconexpo/speech-balloon-orange/128/speech-balloon-orange-a-icon.png');
  background-size: 100px;
}

.myClass:hover:after {
  content: '';
  display:block;
  width: 100px;
  height:100px;
  background-size: 100px;
  background-image: url("http://icons.iconarchive.com/icons/iconexpo/speech-balloon-orange/128/speech-balloon-orange-b-icon.png");
}

<div class="myClass"></div>

不确定它是否会有所帮助，但至少尝试一下。

Answer 2

您可以将 2 张图片统一为 1 张图片，并且可以仅更改背景位置。所以图片会在页面打开时加载。

div{
background:url("http://www.csstr.com/3.png");
  width:100px;
  height:95px;
  
  background-position:0 center;
}

div:hover{

  background-position:100px center;

}

<div></div>

Answer 3

那么这个呢？打开页面时加载了2张图片，我们只需要设置z-indexes。

div {

position:relative;
  
}


img {

  position:absolute;
  left:0;
  top:0;

}

#pic1{

z-index:50;

}

#pic2{
  z-index:40;
}

div:hover #pic2{

z-index:55;
  
}

<div>
  
  <img src="http://icons.iconarchive.com/icons/iconexpo/speech-balloon-orange/128/speech-balloon-orange-a-icon.png" id="pic1"/>
  
  <img src="http://icons.iconarchive.com/icons/iconexpo/speech-balloon-orange/128/speech-balloon-orange-b-icon.png" id="pic2"/>
  
</div>