title: javascript preloading of any images not working in chrome
body: <p>I'm fairly new to web design, I've just created following website <a href="http://www.janewaltonwatercolours.co.uk" rel="nofollow">http://www.janewaltonwatercolours.co.uk</a>, and apart from a couple of minor gliches its working on all browsers. </p>
  
  <p>However, in Chrome, my javascript function for preloading images is not working (causing flicker for navigation bar images, amongst other things) and having tried everything and not coming across any answers on the web i'm slowly going mad......</p>
  
  <p>Heres the relevant code:-</p>
  
  <pre><code>var navbarImages = new Array();
  preload(navbarImages,"images/navbar/topbigdrophover.gif","images/navbar/topdrophover.gif","images/navbar/tophover.gif");
  
  function preload() {
      var images = preload.arguments[0];
  
      for (i = 1; i &lt; preload.arguments.length; i++) {    
          images[i-1] = new Image();
          images[i-1].src = preload.arguments[i];
          }
      }
  </code></pre>
  
  <p>This works fine for all apart from Chrome - any ideas? </p>
  
  <p>Any help greatfully received!</p>
  
  <p>Mike</p>
  
  <p>More details - nav bar flickers on hover suggesting Chrome doesnt preload images. This is backed up by big preview images not being preloaded on thumbnail gallery pages.</p>
  
  <p>The main.css stylesheet is loaded when the page is first loaded, then depending on size of screen, a second stylesheet is loaded to suit the size of the screen. The second stylesheet doesn't affect nav bar though.</p>
  
  <p>Code for nav bar in main.css:- (bit messy I know...)</p>
  
  <pre><code>nav {position: relative; margin: 0 auto; text-align: center; height: 35px; line-height: 35px; font-size: 16px;}
  
  .top {float: left; text-decoration:none; font-size:16px; font-weight:bold; cursor:pointer; background: url(../images/navbar/back.gif);color:#ccc;}
  
  .topbig {float: left; text-decoration:none; font-size:16px; font-weight:bold; cursor:pointer; background: url(../images/navbar/back.gif);color:#ccc;}
  
  .topdropdown {float: left; text-decoration:none; font-size:16px; font-weight:bold; cursor:pointer; background: url(../images/navbar/topdrop2.gif) no-repeat right top;color:#ccc;}
  
  .topbigdropdown {float: left; text-decoration:none; font-size:16px; font-weight:bold; cursor:pointer; background: url(../images/navbar/topbigdrop.gif) no-repeat right top;color:#ccc;}
  
  .top:hover {color:#fff; background: url(../images/navbar/tophover.gif) no-repeat right top;}
  
  .topbig:hover {color:#fff; background: url(../images/navbar/topbighover.gif) no-repeat right top;}
  
  .topbigdropdown:hover {color:#fff; background:url(../images/navbar/topbigdrophover.gif) no-repeat right top;}
  
  .topdropdown:hover {color:#fff; background:url(../images/navbar/topdrophover.gif) no-repeat right top;}
  </code></pre>