0

I have the following images:

Static Image | Starting Animation | Ending Animation

And I am using the following code (jsfiddle example):

HTML

<div id="link">
  <div id="link-gif">&nbsp;</div>
</div>

CSS

#link-gif {
   width:150px;
   height:40px;
   border:1px solid #39464E;
   background-image:url('https://i.stack.imgur.com/W4Kgi.png'); /*static*/
   background-size:contain;
   background-repeat:no-repeat;
   background-position:bottom center;
   cursor:pointer;
}

JS

$(function() {
    $("#link-gif").hover(
        function() {
            /* starting animation */
            $(this).css("background-image", "url('https://i.stack.imgur.com/14qMg.gif')");
        },
        function() {
            /* ending animation */
            $(this).css("background-image", "url('https://i.stack.imgur.com/npwJ0.gif')");
        }                         
    );                  
});

So in summary, what happens is: I first load the static image. When someone hover's over the #link-gif, the starting animation gif starts, and when you hover off of it, the ending animation starts.

My real question is, how do I make sure these gif's are loaded before someone hovers over the image? The first time someone hovers, it is a little glitchy and then it get's better.

I did it this way so that it would work with the oldest browsers possible because I need at least IE8 support. If anyone has any better suggestions, I'm all for it.

bryan
  • 8,879
  • 18
  • 83
  • 166
  • You could load the images as normal, but in a DIV that is hidden or off screen. Then the resource will be there. – durbnpoisn Mar 01 '16 at 20:27
  • You could also check this answer, that has many solutions: http://stackoverflow.com/questions/3646036/javascript-preloading-images – durbnpoisn Mar 01 '16 at 20:29

0 Answers0