title: Replay a GIF Animation/Reload GIF on Click
body: <p>I have a GIF animation that is large and I am having it display a loading icon until the GIF is loaded. Once it is loaded the GIF shows. Works great but I want to add a "replay" button to trigger the GIF to replay (reload).</p>
  
  <p>Code for the loading and GIF: </p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="loader" class="loading img-center"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#loader {
   width: 600px;
   height: 450px;
   margin: auto; 
  }
  
  #loader.loading {
    background: url(/Images/ajax-loader.gif) no-repeat center center;
    width:32px;
    margin:auto ; 
  }
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>var $j = jQuery.noConflict();
  $j(function () {
    var img = new Image();
    $j(img)
     .load(function () { 
       $j(this).hide();
       $j('#loader') 
        .removeClass('loading')
        .append(this);
  
    $j(this).fadeIn();
     })
   .error(function () {
     })
   .attr('src', '/2012/images/august/sailboat.gif');
  });
  </code></pre>
  
  <p>The above code works fine. Now for the "Replay" or "Reload" Code that Does not Work: </p>
  
  <p><strong>HTML</strong> </p>
  
  <pre><code>&lt;a id="refresh" href="#"&gt; Replay Animation &lt;/a&gt;
  </code></pre>
  
  <p><strong>JS</strong> </p>
  
  <pre><code>$j(function() {
    $j("#refresh").click(function() {
       $j("#loader").load("/2012/images/august/sailboat.gif")
    })
  })
  </code></pre>
  
  <p>I know there is some error with the JS but with my lack of skill in JS I do not know what I should be doing or trying. Any help or advice is greatly appreciated! </p>
  
  <p>Thanks! </p>