title: Image preloading ... the fastest way
body: <p>I'm working on a project dealing with a high traffic webpage (really high!). On landing page tons of images are displayed (~40), that needs to be there, right after the page was loaded to display them by fading in. We don't use any library for this since it should be loaded before it was ready to use. We have 4 image servers. Does anybody have any experience which is the best way to load images? I tried the following:</p>
  
  <p>In page header, right after the <code>&lt;head&gt;</code>, inserted a script tag:</p>
  
  <pre><code>&lt;script&gt;
     var img = new Image(); img.src= "src of the image";
  &lt;/script&gt;
  </code></pre>
  
  <p>Doing so, images begin and finish to load before DOMReady and Load event. But images on the page with the same url seem to load again, even if they was loaded before. The urls are the same, caching was on, Mozilla was used. </p>
  
  <p>Maybe there's some mechanism that prevents the browser to use those images? or what?
  Another question: does it cause any slowdown, when DOM and images load parallel?</p>