Question

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

我最初在HTML中加载了GIF，但它的负载很慢。我原来的代码在哪里＆＃34; src＆＃34;使用＆＃34; data-alt-src＆＃34;在悬停时更改图像如下：

修改

我已经想出如何将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 src。这可能吗？我能够在小提琴2中加载GIF，但是我很难将已预加载的可用GIF连接到相应图像的src属性中。有任何想法吗？

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>

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

1 个答案: