Change img src on hover with preloaded gifs

Question

I'm looking for a quick and easy way to preload gifs and then use these gifs on hover when you hover over an image swamping out the src of the image for the gif.

I was originally loading the gifs in the HTML but it makes for a slow load. my original code where the "src" for an image is changed on hover with "data-alt-src" is below:

EDIT

I've figured out how to preload the gif src into the DOM as an image while hiding it from being displayed. I would like for each image to be displayed into its respected HTML figure. Right now its loading all three gifs into the first tag. how can i load it so only one gif loads into each . I have a working fiddle. any help is appreciated!

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

I was able to properly preload the gifs with the following code below, checking the console for a successful preload of the gifs.

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 (loads the gifs in browser console - just to make sure the code works!)

I'm having trouble connecting the preloaded gifs, using this as a reference to go through the array of preloaded gifs and swapping out the src with the gif src on hover, but I havent had success. Any insight and/or direction would be really appreciated as i'm new to coding and would love to learn how to do this. thanks!

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

EDIT so basically (i write this for my understanding too), im currently loading images and gifs at the same time, fiddle 1. I would like to preload the gifs so that when i hover over one of the images the corresponding preloaded gif gets swapped into the img src. Is this possible? I'm able to load the gifs in fiddle 2, but i am having a hard time connecting the available gifs that have been preloaded into the src attribute of the corresponding image. Any ideas?

I think you should execute the preload() for each image elements. — Yonggoo Noh
@Yonggoo Nohi was trying to reference the [0] value from the preload below (.gif). can you explain what you mean please. — user8968486
In the third line of your last js code, could you try to console.log($(this))? — Yonggoo Noh
I mean, that should be an image element which you want to attach hover event to. See jQuery hover() docs — Yonggoo Noh
actually, yes it returns the following ["h", "t", "t", "p", ":", "/", "/", "r", "e", "n", "e", "i", "n", "l", "a", ".", "c", "o", "m", "/", "t", "a", "s", "h", "a", "-", "g", "o", "l", "d", "t", "h", "w", "a", "i", "t", "/", "s", "t", "y", "l", "e", "/", "i", "m", "a", "g", "e", "s", "/", "g", "i", "f", "s", "/", "g", "i", "p", "h", "y", ".", "g", "i", "f"] — user8968486

Rajkumar Somasundaram Rajkumar Somasundaram · Accepted Answer · 2017-11-20T06:17:15

I have using id of the images as numericals whose corresponding index in the array (arrayOfImages) is the src of your gif;

Hope this helps

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>

Change img src on hover with preloaded gifs

1 Answers