title: Background change blinks on hover
body: <p>Here, I have a site I'm coding <a href="http://www.startingcanvas.com" rel="nofollow">www.startingcanvas.com</a>, I added some backgrounds to the icons you will se there, on hover of an icon, the background behind them changes.</p>
  
  <p>The problem is that on first hover on each icon, the background blinks. I thought it was because the images were loading.</p>
  
  <p>But I tried a couple of methods to preload image:</p>
  
  <p>Put them in a display:none div:</p>
  
  <pre><code>&lt;div style="display:none"&gt;
     &lt;img src="images/myimage1.jpg" /&gt;
     &lt;img src="images/myimage2.jpg" /&gt;
     &lt;!-- etc... --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the one with javascript:</p>
  
  <pre><code>for(var i = 0; i &lt; to.icons.length; i++){
      new Image().src = to.icons[i].bg;
      //console.log(to.icons[i].bg);
  }
  </code></pre>
  
  <p>Without solution, do have any ideas, here is my javascript code:</p>
  
  <pre><code>$('.bussiness-icons li').hover(function(){
      var id = $(this).data('id');
      var bg = $('#' + id).attr('src');
  
      $('.icon-templates').css('background', 'url(' + bg +')');
  }, function(){
      return;
  });
  </code></pre>