Question

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

.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＆amp; Edge 如果他们还没有图像的缓存版本（即首次访问时）。但是，如果您在浏览器缓存图像后重新加载页面，它将不再有效，并且当您将鼠标悬停在图像上时会出现闪烁。

Chrome＆amp; 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张照片，并且可以改变背景位置。因此，当页面打开时，pic会加载。

＆＃13;

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

＆＃13;

<div></div>

＆＃13;

Answer 3

那么这个怎么样？打开页面时会加载2张图片，我们只需要设置z索引。

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>

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

3 个答案: