重新加载动画Gif缓存每个jQuery悬停 [英] Reload Animated Gif cache each jQuery hover

问题描述

不同于:从JavaScript重新启动动画GIF无需重新加载图片

我有一个简单的动画gif图标，可以播放一次(不会重复循环播放)

I have a simple animated gif icon which plays once (it does not repeat loop)

我将它放在DIV中.当用户将鼠标悬停在DIV上时，我要播放GIF.当它们移出时，DIV将关闭.回退时，我希望他们再次播放GIF-我可以在jQuery上使用强制缓存吗?

I have it inside a DIV. When the user mouse the mouse over the DIV I want to play the GIF. When they move out the DIV turns off. When the move back I want them to play the GIF again - can I use a force cache on 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=""
*/ 

推荐答案

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

I updated the old code to show the images reset. It should be fast since it's already cached.

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，所以它可以正常播放

As I want to remove the SRC on hover out.. so it plays fully

这篇关于重新加载动画Gif缓存每个jQuery悬停的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！