JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<figure>
 <img src="http://media02.hongkiat.com/thumbs/640x410/does-cleaning-ram-helps.webp" alt="Static Image" data-alt="http://giphy.com/static/img/homepage_banners/election-banner.gif"/>
</figure>

JavaScript

(function($) {

// retrieve gif

var getGif = function() {
  var gif = [];
  $('img').each(function() {
    var data = $(this).data('alt');
    gif.push(data);
  });
  return gif;
}
var gif = getGif();

// pre-load gif

var image = [];

$.each(gif, function(index) {
  image[index]     = new Image();
  image[index].src = gif[index];
});

// swap on click

$('figure').on('click', function() {

  var $this   = $(this),
          $index  = $this.index(),

          $img    = $this.children('img'),
          $imgSrc = $img.attr('src'),
          $imgAlt = $img.attr('data-alt'),
          $imgExt = $imgAlt.split('.');

      var temp=$img.attr('src');
      $img.attr('src', $imgAlt).attr('data-alt', temp);
    });

})
(jQuery);