重新加载动画Gif缓存每个jQuery悬停

时间:2011-12-12 12:18:30

标签: jquery gif animated-gif

与...不同:Restart an animated GIF from JavaScript without reloading the image

我有一个简单的动画gif图标,播放一次(它不重复循环)

我把它放在DIV里面。当用户将鼠标放在DIV上时,我想播放GIF。当他们搬出时,DIV关闭。当后退我希望他们再次播放GIF时 - 我可以在jQuery上使用强制缓存:

HTML:

<div class="datebox magicbox_1" id="date_1">
  <img id="magicimage_1" class="magicimg" src="assets/img/dates/gifpicture.gif" alt=""/>
</div>

jQuery的:

    $("#date_1").hover(function () {
        $("#magicimage_1").show();
    }, function () {
        $("#magicimage_1").hide();
    });

// thought about these
/*
var myImg = new Image();
myImg.src = "image.gif?rnd=" + Math.random();
img src="filename.gif?rand=<#?=rand(1,1000);?>" alt=""
*/ 

1 个答案:

答案 0 :(得分:2)

我更新旧代码以显示图像重置。它应该很快,因为它已经被缓存了。

http://jsfiddle.net/gYmvN/4/

所以新代码将是:

$("#date_1").hover(function () {
    //$("#magicimage_1").show();
    $("#magicimage_1").show().attr('src', 'assets/img/dates/1_randomhash-aefgh.gif?rnd=' +Math.random()+'');
}, function () {
    //$("#magicimage_1").hide();
    $("#magicimage_1").hide().attr('src', '');
});

因为我想在悬停时删除SRC ..所以它完全播放