预加载动画gif悬停

Question

我有以下图片：

Static Image | Starting Animation | Ending Animation

我正在使用以下代码（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('http://i.imgur.com/YgLJoVH.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('http://i.imgur.com/HhsBws5.gif')");
        },
        function() {
            /* ending animation */
            $(this).css("background-image", "url('http://i.imgur.com/WLFzz3S.gif')");
        }                         
    );                  
});

总而言之，发生的事情是：我首先加载静态图像。当某人悬停在#link-gif上方时，开始动画gif开始，当你将其悬停时，结束动画开始。

我真正的问题是，在有人将鼠标悬停在图像上之前，如何确保加载这些gif？第一次有人徘徊，这有点小故障然后变得更好。

我这样做是因为它可以与最老的浏览器一起使用，因为我至少需要IE8支持。如果有人有任何更好的建议，我会全力以赴。