javascript - jQuery 图像交换 - chrome 中的奇怪行为

Question

我有一个小的 JS 函数运行以在鼠标悬停时更改 gif。它基本上是这样工作的:在底层有一个 gif 循环，它在 mouseenter 上切换到另一个。在那个上面还有另一个 gif，它显示了这两个状态之间的转换，也是 mouseenter 上的 switchend。第二个 gif 没有循环并以透明框架结束，以显示下面的 gif - 听起来有点复杂，所以看看我的 jsfiddle:

http://jsfiddle.net/Njw95/

现在它在 safari 和 firefox 中运行完美，但在 chrome 中有一个小问题:就在升级动画应该播放之前，有一毫秒的随机帧闪烁。我可以将此帧识别为“降级”动画的第一帧。我将降级动画的第一帧更改为黑色。现在在 chrome 中，在 mouseenter 和 mouseleave 上有一个黑色的闪光......在其他浏览器中只有在 mouseleave 上......

$(document).ready(function () {
$(".col1").mouseenter(function () {
    $("#levelup").attr('src', 'http://studio-bonsei.de/bilder/upgrade.gif');
    $("#mainpic").attr('src', 'http://studio-bonsei.de/bilder/level2.gif');
});
$(".col1").mouseleave(function () {
    $("#levelup").attr('src', 'http://studio-bonsei.de/bilder/downgrade_tr.gif');
    $("#mainpic").attr('src', 'http://studio-bonsei.de/bilder/standard.gif');
});
});

Answer 1

看起来像 Chrome 中的一些 gif 图像缓存错误。
您可以改为始终请求新图片。为我解决了这个问题:

jsFiddle demo

JS:

var $pic = $("#pic"),
    path = "http://studio-bonsei.de/bilder/";

$pic.hover(function( e ) {
   var mE = e.type=="mouseenter";
   var s = new Image(); s.src = path+(mE?"upgrade":"downgrade_tr")+".gif";
   var b = new Image(); b.src = path+(mE?"level2":"standard") +".gif";
   $pic[0].src = s.src;
   $pic[0].style.backgroundImage = "url("+ b.src +")"; 
});

HTML(是的，所有你需要的)

<img id="pic" src="http://studio-bonsei.de/bilder/standard.gif">

CSS:

*{margin:0;}
#pic {
    background: url(http://studio-bonsei.de/bilder/empty.gif) no-repeat 50% 50% / cover ;
    width: 50%;
}