Can't load images in browser cache with jQuery
<p>I have a small jQuery program which implements an image slideshow with a fading effect. When an image is rendered and the next one has to be shown, it is first loaded in background and then rendered. The code loading the image is below:</p>

<pre><code>    var img = $('&lt;img/&gt;'); 
    img.attr('src', imageUrl);

    img.load(function()
      {
        $(photo).attr('loaded' + mediaSize, true)
                .attr('width',              this.width)
                .attr('height',             this.height);
        renderPhoto(photo, mediaSize);
      });
</code></pre>

<p>The relevant part for rendering the photo in renderPhoto() is:</p>

<pre><code>    $("#image" + activeContainer).css({ "background-image" : "url(" + imageUrl + ")" });          
</code></pre>

<p>There's also a control that keeps track of loaded images and doesn't re-read them twice, supposing that, having been loaded earlier, they are in the browser cache.</p>

<p>Everything is working fine but the cache. Whenever an image is rendered (with the latest line of code above), it is always reloaded from the server, ruining the fade-in effect.</p>

<p>The headers returned by the server seems ok for caching:</p>

<pre><code>% curl -o /tmp/x -v http://stoppingdown.net/media/stillimages/20100102-0072/1280/image.jpg
* About to connect() to stoppingdown.net port 80 (#0)
*   Trying 78.46.194.117...   % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
  0     0    0     0    0     0      0      0 --:--:--  0:00:02 --:--:--     0connected
* Connected to stoppingdown.net (78.46.194.117) port 80 (#0)
&gt; GET /media/stillimages/20100102-0072/1280/image.jpg HTTP/1.1
&gt; User-Agent: curl/7.21.4 (universal-apple-darwin11.0) libcurl/7.21.4 OpenSSL/0.9.8r zlib/1.2.5
&gt; Host: stoppingdown.net
&gt; Accept: */*
&gt; 
&lt; HTTP/1.1 200 OK
&lt; Date: Sun, 04 Nov 2012 11:52:08 GMT
&lt; X-NorthernWind-Version: 1.1-ALPHA-19
&lt; Content-Type: image/jpeg
&lt; Content-Length: 2207579
&lt; Last-Modified: Thu, 01 Nov 2012 00:08:11 CET
&lt; ETag: "1351724891000"
&lt; Expires: Sun, 11 Nov 2012 12:52:08 CET
&lt; Server: Jetty(6.1.24)
&lt; 
{ [data not shown]
</code></pre>

<p>Debugging with Chrome and looking at the resources pane, I can see multiple entries for the same image, reloaded at each round (for instance, at first round I see 20031227-0085.jpg, and when the slideshow starts a second cycle I see two 20031227-0085.jpg, then three, and so on). Definitely the resource is not loaded in the browser cache... and I don't understand why.</p>

<p>Thanks.</p>

<p>PS The full code is available <a href="https://bitbucket.org/tidalwave/bluette-src/src/810394e72951dea6eaacc8019a995c87273487c0/bluette/js/bluette.js?at=default" rel="nofollow">here</a>.</p>
