Javascript 在Firefox或Edge中从缓存预加载图像时出现问题

我有一个网页，当鼠标滑过某个元素时（使用

：hover

css伪类），它会更改该元素的

背景图像
url

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

(new Image()).src = hotImgUrl;

如果Firefox&Edge还没有缓存版本的图像（即首次访问时），则可以使用此功能。
但是，如果浏览器缓存了图像后重新加载页面，它将不再工作，当您将鼠标悬停在图像上时会出现闪烁

Chrome和Safari没有这个问题

我在下面创建了一个示例，展示了这个问题

//预加载热映像：
（新图像（））.src=”http://icons.iconarchive.com/icons/iconexpo/speech-balloon-orange/128/speech-balloon-orange-b-icon.png";

.myClass{
宽度：100px；
高度：100px；
背景重复：无重复；
背景图像：url（'http://icons.iconarchive.com/icons/iconexpo/speech-balloon-orange/128/speech-balloon-orange-a-icon.png');
背景尺寸：100px；
}
.myClass:悬停{
背景图像：url（“http://icons.iconarchive.com/icons/iconexpo/speech-balloon-orange/128/speech-balloon-orange-b-icon.png");
}



这是Firefox/Edge的bug吗？还是我走错了路？任何帮助都将不胜感激
 试试这个：


//预加载热映像：
（新图像（））.src=”http://icons.iconarchive.com/icons/iconexpo/speech-balloon-orange/128/speech-balloon-orange-b-icon.png";
.myClass{
宽度：100px；
高度：100px；
背景重复：无重复；
背景图像：url（'http://icons.iconarchive.com/icons/iconexpo/speech-balloon-orange/128/speech-balloon-orange-a-icon.png');
背景尺寸：100px；
}
.myClass:悬停：之后{
内容：''；
显示：块；
宽度：100px；
高度：100px；
背景尺寸：100px；
背景图像：url（“http://icons.iconarchive.com/icons/iconexpo/speech-balloon-orange/128/speech-balloon-orange-b-icon.png");
}
您可以将两张图片统一为一张图片，并且可以只更改背景位置。所以当页面打开时pic会加载


div{
背景：url（“http://www.csstr.com/3.png");
宽度：100px；
高度：95px；
背景位置：0中心；
}
div:悬停{
背景位置：100px中心；
}
那么这个呢？页面打开时会加载2张图片，我们只需设置z索引即可


div{
位置：相对位置；
}
img{
位置：绝对位置；
左：0；
排名：0；
}
#图1{
z指数：50；
}
#图2{
z指数：40；
}
分区：悬停#图片2{
z指数：55；
}

谢谢u238-这是一个很好的解决方案，但不幸的是，它不适合我，因为我需要使用两个单独的图像。它供一个组件使用，该组件允许您为“热”状态指定一个单独的映像。谢谢您，Alex-这实际上非常有效。但是，如果“热”图像包含alpha部分，则会出现问题-您将通过alpha部分看到下面的图像。再次感谢！这对我的用例来说是一个改进，但它和Alex的答案一样有点小麻烦——“热”图标中的alpha将允许基本图像显示出来。我是个白痴——我可以用可见性替换z-index，这就行了。这意味着我必须重构我的组件的工作方式，但这将解决我的问题。我很犹豫是否接受目前的答案，但是如果您可以编辑您的答案，添加关于使用可见性的注释，我很乐意接受。如果您接受我的答案，如果您找到了解决方案，这并不重要。顺便说一句，如果图片大小相同，则无需更改可见性，z索引将起作用。不管怎样，正如我所说，如果你找到了你的解决方案，这就是点。我相信，z索引只有在图像完全不透明的情况下才会起作用？例如，编辑代码，使#pic2的不透明度为0.5，以了解我的意思。我认为没有。z索引设置元素的堆栈顺序。我的意思是，在这个例子中，有两张图片大小完全相同。其中一个有更大的z指数，所以它位于前景，所以我们可以看到这一个，而另一个在第一个后面，所以我们看不到它。
(new Image()).src = hotImgUrl;