Two requests for the same image

[akostajti]

In chrome, for some reason, there are two requests fired for the lazy loaded images. I found that other developers have the same problem. One of them created this fiddle where you can examine the problem: http://jsfiddle.net/3VwRq/4/

I found that the two requests are coming from these lines:
$self.attr("src", original);
attr("src", $self.data(settings.data_attribute));

If I change the second line for example to attr("src", "");, the it works fine.

The problem is only present in chrome, Firefox and IE are fine.

[tuupola]

There is something about the server response which denies image caching. If I change data-original to http://placekitten.com/g/600/300only one request is made.

http://jsfiddle.net/3VwRq/11/

[akostajti]

These are the request headers:

Accept:image/webp,/;q=0.8
Accept-Encoding:gzip,deflate,sdch
Accept-Language:hu-HU,hu;q=0.8,en-US;q=0.6,en;q=0.4
Connection:keep-alive
Cookie:JSESSIONID=8FA6513F955C9DBFA03157574730957F;
Host:localhost:8080
Referer:http://localhost:8080/cb/tracker/1798?view_id=-11
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/30.0.1599.101 Safari/537.36

Response headers:
Accept-Ranges:none
Content-Disposition:inline; filename="ad66d76ee53f24a0dea5345cd41d18c2.jpeg"
Content-Length:12870
Content-Type:image/jpeg;charset=UTF-8
Date:Fri, 08 Nov 2013 15:24:53 GMT
Server:Apache-Coyote/1.1

Do you see any problems?

[tuupola]

Where did you take those? Response headers for the image you used in the JSFiddle above are:

Cache-Control:private
Content-Length:200796
Content-Type:image/jpeg
Date:Fri, 08 Nov 2013 15:50:24 GMT
Server:Microsoft-IIS/7.0
X-AspNet-Version:4.0.30319
X-Powered-By:ASP.NET

Only thing I see about caching is the Cache-Control:private. It should not have anything to do with this but it still might be worth trying to remove it.

[SocketReve]

if i set "Cache-Control" flag in HTTP header i have no problem

Accept:image/webp,*/*;q=0.8
Accept-Encoding:gzip,deflate,sdch
Accept-Language:it,it-IT;q=0.8
Cache-Control:no-cache
Connection:keep-alive
Pragma:no-cache
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/30.0.1599.101 Safari/537.36

Response Headers
Accept-Ranges:bytes
Cache-Control:max-age=37739520, public
Connection:keep-alive, Keep-Alive
Content-Length:20324
Content-Type:image/jpeg
Date:Sat, 09 Nov 2013 10:57:30 GMT
ETag:"4f64-4e973d40d6121"
Keep-Alive:timeout=5, max=96
Last-Modified:Thu, 24 Oct 2013 02:59:55 GMT
Server:Apache/2.4.6 (Unix) mod_fcgid/2.3.7

[akostajti]

In this fiddle I used an url from our server: http://jsfiddle.net/93nwP/ . There's nothing special about caching, still, there are two requests.

[akostajti]

You were right, it was caused by our server preventing the caching of images. Thanks for your help!

[tuupola]

What was the reason?

[akostajti]

The Cache-Control header was not set on the response.