Onclick使用jQuery播放GIF图像，并从头开始 [英] Onclick play GIF image with jQuery and start from beginning

问题描述

我有一个上面有图片的网站.一些图像是GIF动画图像.我要做的是显示GIF的静态图像，并在发生点击事件时显示实际的GIF图像.

I have a website with images on it. Some of the images are animated GIF images. What I've done is to show a static image of the GIF and on a click event, the actual GIF images is displayed.

这是我的代码:

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图像，从而阻止了所有元素的发生.

I am changing the class of the previous and next elements because I may have more than one GIF image on a single page, thus preventing the action of occurring for all of them.

到目前为止，该脚本可以正常工作.我实际上想要实现的是让GIF图像始终从头开始.目前，它只是第一次这样做.然后，看起来它继续在后台播放，而在第二个呼叫中，它只是继续播放.有时甚至冻结，我想这与缓存有关.

So far so good, the script works. What I am trying to achieve actually is for the GIF image to always start from the beginning. At the moment it only does so the first time. Then, it looks like it continues playing in the background and on the second call, it simply continues playing. Sometimes even it freezes, something to do with cache I guess.

我该怎么做?

推荐答案

这将是较大图像的解决方案

this would be a solution to larger images Restart an animated GIF from JavaScript without reloading the image

在螺帽壳中将图像加载到javascript变量中，然后在单击时更改src

in a nut shell load the image into a javascript variable then change out the src on click

$(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/

它很难看，我找不到合适的图像作为开始，但是您可以看到它每次都在同一位置开始

its ugly i couldnt find the right image for the starting but you can see that it starts in the same place every time

这篇关于Onclick使用jQuery播放GIF图像，并从头开始的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！