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.

我怎样才能做到这一点?

How can i accomplish this?

推荐答案

这将是更大图像的解决方案 从 JavaScript 重新启动动画 GIF 而不重新加载图像

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屋！