title: Chrome Image Preloading does not work on first image load
body: <p>I have anchors on a page that displays a different background image on mouse hover and mouse out. I have preloaded the images to avoid flickering and re-requesting the images from the server on mouse hover/out. The scripts works fine on IE8/FF but Chrome behaves differently. In the latest version of Chrome, the first time I hover on the anchor, the image is re-requested from the server causing a flicker, why is this? Succeeding mouse hover/out works fine and there is no flicker.</p>
  
  <p>Code below:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script src="http://code.jquery.com/jquery-1.8.3.min.js"&gt;&lt;/script&gt;
  
  &lt;style type="text/css"&gt;
  body:after
  {
    content: url('/images/1.png') url('/images/1a.png')
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  
  .imageHover
  {
     display:inherit;
     width:25px;
     height:50px;
     background:url('/images/1.png') no-repeat;
  }
  
  .imageOut
  {
     display:inherit;
     width:25px;
     height:50px;
     background:url('/images/1a.png') no-repeat;
  }
  &lt;/style&gt;
  
  &lt;script language="javascript" type="text/javascript"&gt;
      var oneSelected = new Image();
      var oneUnselected = new Image();
  
      oneSelected.src="/images/1.png";
      oneUnselected.src="/images/1a.png";
  
      function OnImageMouseOver(target) {
         $(target).toggleClass('imageHover', true);
         $(target).toggleClass('imageOut', false);
      }
      function OnImageMouseOut(target) {
         $(target).toggleClass('imageHover', false);
         $(target).toggleClass('imageOut', true);
      }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
     &lt;a href="#" class="imageOut" onmouseover="OnImageMouseOver(this)" onmouseout="OnImageMouseOut(this)"&gt;&lt;/a&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Converted anchor to image, but it still won't work in Chrome:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script src="http://code.jquery.com/jquery-1.8.3.min.js"&gt;&lt;/script&gt;
  &lt;script language="javascript" type="text/javascript"&gt;    
      if (document.images) {
          var oneSelected = new Image();
          var oneUnselected = new Image();
  
          oneUnselected.src = '/images/1a.png';
          oneSelected.src = '/images/1.png';
      }
  
      function OnRatingMouseOver(target, newSrc) {
          $(target).attr('src', newSrc);
      }
  
      function OnRatingMouseOut(target, newSrc) {
          $(target).attr('src', newSrc);        
      }
  &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="mainDiv" style="width:400px;"&gt;
        &lt;div id="inputDiv"&gt;
           &lt;table id="inputTable"&gt;
              &lt;tr&gt;
                 &lt;td&gt;Rating&lt;/td&gt;
                 &lt;td&gt;
                    &lt;img id='rating1Anchor'
                          src='/images/1a.png'
                          onmouseover="OnRatingMouseOver(this, '/images/1.png');"
                          onmouseout="OnRatingMouseOut(this, '/images/1a.png');"
                          onclick="OnRatingClick(this, '/images/1.png', 1);"&gt;
                    &lt;/td&gt;
             &lt;/tr&gt;           
           &lt;/table&gt;
        &lt;/div&gt; 
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;html&gt;
  </code></pre>