title: Image preload not working
body: <p>I wrote (well, copied) a Javascript image preload function and it seems to successfully preload my images when my page loads, but when the page actually needs to display the images, there is a delay during which it apparently loads them again, defeating the purpose of preloading. Possible causes of this behavior and fixes?</p>
  
  <p>I tried but failed to create reproducible code so I guess the cause of this is somewhere in the complexities of my whole project.  Here's the image preload function I'm using:</p>
  
  <pre><code>function preload(sources)
  {
    var images = [];
    for (i = 0, length = sources.length; i &lt; length; ++i) {
      images[i] = new Image();
      images[i].src = sources[i];
    }
  }
  </code></pre>
  
  <p>I call this on a long array of images stored on our server when the page is loaded, and I can see a long list of "GET" requests in my console that seem to indicate it's indeed preloading the images. Later, when the images are displayed within dynamically generated content (using jQuery if it matters), there is a delay when they are loaded and I see another GET request in the console, with the status "HTTP/1.1 304 Not Modified".  So it looks like the images are being loaded again instead of using the cached version.  What could be causing this?</p>
  
  <p>I do have some ajax calls occurring after image preload, before image display, with "cache: false" in them - is that a possible cause? However, these ajax calls don't directly affect the page content - they are just used to get database info which in turn affects the page content.</p>
  
  <p>By the way, I am using Firefox for testing. I read somewhere that Chrome at some time would send requests to see whether cached images had been modified but this is supposedly not an issue with Firefox.</p>