Replay A GIF Animation/Reload GIF On Click

I have a GIF animation that is large and I am having it display a loading icon until the GIF is loaded. Once it is loaded the GIF shows. Works great but I want to add a 'replay' bu

Solution 1:

Check this:

$j("#refresh").click(function() {
  $j("#loader").find('img').attr("src", "/2012/images/august/sailboat.gif");
});

As in your previous code you're append the image within #loader so, $('#loader').load(..) will not work. Find the image within #loader and then change the src of that image.

Solution 2:

You could also append timestamp to avoid image loading from cache if needed:

$j("#refresh").click(function() {
  var timestamp = new Date().getTime();
  $j('#loader').find('img').attr('src', '/2012/images/august/sailboat.gif'+'?'+timestamp);
});