Question

我有一个网站上有图片。一些图像是动画GIF图像。我所做的是显示GIF的静态图像，并在点击事件中显示实际的GIF图像。

这是我的代码：

JQuery的

$(".theimage").click(function() {
$(this).addClass('hidden');
$(this).next().removeClass('hidden');
});
$(".theimage2").click(function() {
 $(this).addClass('hidden');
$(this).prev().removeClass('hidden');
});

HTML

<img class="theimage" src="image_static.gif" alt=""/>

<img class="theimage2 hidden" src="image_animated.gif" alt=""/>

CSS

.hidden{
display:none !important;
}

我正在更改上一个和下一个元素的类，因为我可能在一个页面上有多个GIF图像，从而阻止了对所有这些元素发生的操作。

到目前为止，脚本很有效。实际上我想要实现的是GIF图像始终从头开始。目前它只是第一次这样做。然后，看起来它继续在后台播放，在第二次通话时，它只是继续播放。有时即使它冻结了，我想也可以使用缓存。

我怎样才能做到这一点？

Answer 1

这将是更大图像Restart an animated GIF from JavaScript without reloading the image

的解决方案在坚果壳中的

将图像加载到javascript变量中，然后在点击

时更改src

$(function(){
    var image = new Image();
       image.src='http://rack.3.mshcdn.com/media/ZgkyMDEyLzEwLzE5LzExXzMzXzMzXzE3Nl9maWxlCnAJdGh1bWIJMTIwMHg    5NjAwPg/462b8072';
     $('#img').click(function(){
       $(this).attr('src',image.src);
     }); 
 });

http://jsfiddle.net/GS427/1/

它的丑陋我无法找到合适的起始图像，但你可以看到它每次都在同一个地方开始

Answer 2

您需要将鼠标事件分为mousedown和mouseup，先执行隐藏并在mousedown上显示第二个或反之处首先执行隐藏并显示第二个或反之，

Onclick使用jQuery播放GIF图像并从头开始

2 个答案: