使用预加载的 gif 更改悬停时的 img src

Question

我正在寻找一种快速简便的方法来预加载 gif，然后在悬停时使用这些 gif，当您将鼠标悬停在图像上时会淹没 gif 图像的 src。

我最初是在 HTML 中加载 gif，但加载速度很慢。我的原始代码在“data-alt-src”悬停时更改图像的“src”如下：

编辑

我已经弄清楚如何将 gif src 作为图像预加载到 DOM 中，同时隐藏它不显示。我希望每个图像都显示在其受人尊敬的 HTML 图中。现在它将所有三个 gif 加载到第一个标签中。我怎样才能加载它，所以只有一个 gif 加载到每个 .我有一个工作的fiddle。任何帮助表示赞赏！

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

WORKING FIDDLE

我能够使用以下代码正确预加载 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();
});

FIDDLE HERE（在浏览器控制台中加载 gif - 只是为了确保代码有效！）

我无法连接预加载的 gif，使用 this 作为参考来遍历预加载的 gif 数组并在悬停时用 gif src 交换 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"
]);

WORKING FIDDLE

编辑 所以基本上（我写这个也是为了我的理解），我目前正在同时加载图像和 gif，小提琴 1。我想预加载 gif，以便当我将鼠标悬停在其中一个图像上时，相应的预加载 gif 被交换到img 源文件。这可能吗？我可以在小提琴 2 中加载 gif，但是我很难将已预加载到相应图像的 src 属性中的可用 gif 连接起来。有任何想法吗？

Answer 1

我使用图像的 id 作为数字，其在数组 (arrayOfImages) 中的对应索引是您的 gif 的 src；

希望对你有帮助

let images = document.getElementsByTagName('img');
	
	for(i=0 ; i<images.length; i++) {
		images[i].onmouseover  = function() {getIdAndLoadGif(this)};
	}	

	function getIdAndLoadGif(e) {		
		loadGif(e.getAttribute('id'));
	}

	function loadGif(imgId) {		
		document.getElementById(imgId).src= arrayOfImages[imgId];
	}
	
	let arrayOfImages = ["http://reneinla.com/tasha-goldthwait/style/images/gifs/giphy.gif",
      "http://s3.amazonaws.com/barkpost-assets/50+GIFs/17.gif",
      "http://reneinla.com/tasha-goldthwait/style/images/gifs/OPERATOR.gif"];

figure img{
  width: 50%;
  height: auto;
}

<figure>
  <img src="http://reneinla.com/tasha-goldthwait/style/images/stills/FORD-SUPER-BOWL.jpg" id="0"/>
</figure>
<figure>
  <img src="https://assets.babycenter.com/ims/2016/09/iStock_83513033_4x3.jpg" id="1"/>
</figure>
<figure>
  <img src="http://reneinla.com/tasha-goldthwait/style/images/stills/OPERATOR.jpg" id="2"/>
</figure>