4

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.

Here is my code:

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;
}

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.

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?

Oscar Batlle
  • 157
  • 2
  • 4
  • 22
  • Could you give us a [JSFiddle](http://jsfiddle.net)? – Robbie Wxyz Nov 27 '13 at 17:53
  • When an image is hidden it doesn't stop, it just keeps playing in the background. I think you will need to either remove the `img` element and re-add it to it's parent, or change its `src` attribute when it is show/hidden. – Robbie Wxyz Nov 27 '13 at 17:55
  • How can i re-add it to it's parent? – Oscar Batlle Nov 27 '13 at 17:59
  • Or change its src attribute when its show/hidden ? – Oscar Batlle Nov 27 '13 at 18:01
  • Like this: `var el=$('#bla'),parent=e.parent(); /*remove*/el.remove(); /*re-add*/parent.append(el);` – Robbie Wxyz Nov 27 '13 at 18:05
  • Can you do the example with the code that i already have here? – Oscar Batlle Nov 27 '13 at 18:09
  • Yes, I'm working on it... – Robbie Wxyz Nov 27 '13 at 18:09
  • 1
    possible duplicate of [Restart an animated GIF from JavaScript without reloading the image](http://stackoverflow.com/questions/3191922/restart-an-animated-gif-from-javascript-without-reloading-the-image) – Robbie Wxyz Nov 27 '13 at 18:52
  • I'm trying something like this : `var src = $('.theimage2 img').attr('src'); img1 = new Image(); img1.src = src;$(".theimage2 img").click(function() { $(this).attr('src', img1.src); });` – Oscar Batlle Nov 27 '13 at 19:32
  • I'm trying something like this : `var src = $('.theimage2 img').attr('src'); img1 = new Image(); img1.src = src;$(".theimage2 img").click(function() { $(this).attr('src', img1.src); });` and it does work, however when i use more than one GIF image on a single page, the action is occurring for all of them. How can i prevent this ? – Oscar Batlle Nov 27 '13 at 19:38
  • 1
    Your jQuery is wrong - use `$("img.theimage2")` instead of `$(".theimage2 img")`. – Robbie Wxyz Nov 27 '13 at 19:41
  • Is actually reloading the animated GIF like i want 'BUT' I'm using more than one GIF image on a single page, the action is occurring for all of them. How can i prevent this ? – Oscar Batlle Nov 27 '13 at 19:57
  • Please refer to my answer in another question http://stackoverflow.com/questions/3191922/restart-an-animated-gif-from-javascript-without-reloading-the-image/38365667#38365667. – wizawu Jul 14 '16 at 09:28

2 Answers2

6

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

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

Community
  • 1
  • 1
thermite
  • 502
  • 6
  • 19
  • I know that works, however, when the GIF image is larger in size, let's say 2-3MB, it takes some time for it to load – Oscar Batlle Nov 27 '13 at 18:00
  • if you loaded it hidden somewhere else it would grab the cached version (assuming their browser settings allow it...." – thermite Nov 27 '13 at 18:08
0

You need to divide mouse event to mousedown and mouseup, perform hiding first and showing second or viceversa on mousedown then perform hiding first and showing second or viceversa on up,

Anjan Kumar GJ
  • 81
  • 5