Измените img src при наведении с предварительно загруженными GIF-файлами

Я ищу быстрый и простой способ предварительной загрузки гифок, а затем использовать эти гифки при наведении, когда вы наводите курсор на изображение, забивая src изображения для gif.

Изначально я загружал гифки в HTML, но это замедляет загрузку. мой исходный код, в котором «src» для изображения изменяется при наведении курсора на «data-alt-src», приведен ниже:

ИЗМЕНИТЬ

Я понял, как предварительно загрузить gif src в DOM в виде изображения, скрывая его от отображения. Я хотел бы, чтобы каждое изображение отображалось в его уважаемой фигуре HTML. Прямо сейчас загружаются все три гифки в первый тег. как я могу загрузить его, чтобы в каждый загружался только один gif. У меня есть работающая скрипка . любая помощь приветствуется!

HTML

<figure>
  <img src="http://reneinla.com/tasha-goldthwait/style/images/stills/FORD-SUPER-BOWL.jpg" data-alt-src="http://reneinla.com/tasha-goldthwait/style/images/gifs/giphy.gif"/>
</figure>
<figure>
  <img src="http://reneinla.com/tasha-goldthwait/style/images/stills/OPERATOR.jpg" data-alt-src="http://reneinla.com/tasha-goldthwait/style/images/gifs/giphy.gif"/>
</figure>

JavaScript

var sourceSwap = function () {
    var $this = $(this);
    var newSource = $this.data('alt-src');
    $this.data('alt-src', $this.attr('src'));
    $this.attr('src', newSource);
}

$(function() {
    $('img[data-alt-src]').each(function() { 
        new Image().src = $(this).data('alt-src');
    }).fadeIn().hover(sourceSwap, sourceSwap);
});

РАБОТАЮЩАЯ СКРИПКА

Я смог правильно предварительно загрузить GIF-файлы с помощью следующего кода ниже, проверив консоль на предмет успешной предварительной загрузки GIF-файлов.

JavaScript

function preloader()
{
 // counter
  var i = 0;

  // create object
  imageObj = new Image();

 // set image list
  images = new Array();
  images[0]="http://reneinla.com/tasha-goldthwait/style/images/gifs/giphy.gif"
  images[1]="http://reneinla.com/tasha-goldthwait/style/images/gifs/LEAGUE-OF-LEGENDS.gif"
  images[2]="http://reneinla.com/tasha-goldthwait/style/images/gifs/OPERATOR.gif"

 // start preloading
  for(i=0; i<=2; i++) 
  {
      imageObj.src=images[i];
      console.log(images[i]);
  }
} 

jQuery(document).ready(function () {
    preloader();
});

ПОСТРОЙТЕ ЗДЕСЬ (загружает гифки в консоль браузера — просто чтобы убедиться, что код работает!)

У меня возникли проблемы с подключением предварительно загруженных файлов GIF, используя это в качестве ссылки для просмотра массива предварительно загруженных картинок и замены src на gif src при наведении курсора, но я не добился успеха. Любое понимание и / или направление будут действительно оценены, поскольку я новичок в кодировании и хотел бы узнать, как это сделать. Спасибо!

HTML

<figure>
  <img src="http://reneinla.com/tasha-goldthwait/style/images/stills/FORD-SUPER-BOWL.jpg"/>
</figure>
<figure>
  <img src="http://reneinla.com/tasha-goldthwait/style/images/stills/OPERATOR.jpg" />
</figure>

JavaScript

function preload(arrayOfImages) {
    $(arrayOfImages).each(function(){
            $(this).hover(function(){
            $('<img/>')[0].src = this;
        });
    });
}



preload([
    "http://reneinla.com/tasha-goldthwait/style/images/gifs/giphy.gif",
      "http://reneinla.com/tasha-goldthwait/style/images/gifs/LEAGUE-OF-LEGENDS.gif",
      "http://reneinla.com/tasha-goldthwait/style/images/gifs/OPERATOR.gif"
]);

РАБОТАЮЩАЯ СКРИПКА

РЕДАКТИРОВАТЬ, так что в основном (я тоже пишу это для своего понимания), я в настоящее время загружаю изображения и GIF-файлы одновременно, скрипка 1. Я хотел бы предварительно загрузить GIF-файлы, чтобы при наведении курсора на один из images соответствующий предварительно загруженный gif заменяется на img src. Это возможно? Я могу загрузить GIF-изображения в скрипте 2, но мне трудно подключить доступные GIF-файлы, которые были предварительно загружены в атрибут src соответствующего изображения. Есть идеи?