title: Force the browser to send http request for an image
body: <p>I have an app that loads images dynamically with JavaScript and draws them to a canvas. The images can change, but I also want to leverage caching, so I am using the last modified http header and sending 304 response when the image is not modified. That is all fine and well and seems to be working...</p>
  
  <p>But there's a strange thing that is happening (so far only tested in Chrome and Safari on OSX) where occasionally the browser just neglects to send a request for an image! In the script, I make a <code>new Image()</code>, and the <code>onload</code> function fires, but when I use the network inspector, the request is never made. I also can confirm on the server side that a request was not received. </p>
  
  <p>The original request with an empty cache response has these headers:</p>
  
  <pre><code>Connection:keep-alive
  Content-Length:25937
  Content-Type:image/png
  ETag:Thu, 10 May 2012 20:48:13 GMT
  Last-Modified:Thu, 10 May 2012 20:48:13 GMT
  </code></pre>
  
  <p>Shouldn't the browser make a new request every time for this image, since it has the last-modified header? When I run a test, the browser seems to make only one new request every minute or so (regardless how many copies of the same image I try to load)... Is this the expected behavior? Is there some header combination that will force the browser to check every time if an image is modified? Or perhaps some JavaScript magic that will do the trick?</p>