Geek asks and answers

Force the browser to send an HTTP request for the image

I have an application that dynamically loads images using JavaScript and draws them on the canvas. Images may change, but I also want to use caching, so I use the last modified http header and send a response 304 when the image does not change. Everything is good, good and seems to work ...

But there is a strange thing that happens (while it is tested only in Chrome and Safari on OSX), where sometimes the browser simply neglects to send a request for an image! In the script, I create new Image()and the function onloadfires, but when I use the network inspector, the request is never executed. I can also confirm on the server side that the request was not received.

The original request with an empty cache response has the following headers:

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

Shouldn't the browser make a new request each time for this image, since it has the last modified header? When I run the test, the browser seems to make only one new request every minute or so (no matter how many copies of the same image I try to load) ... Is this the expected behavior? Is there any combination of headers that will force the browser to check every time if the image is resized? Or maybe some kind of JavaScript magic that will do the trick?

+3
source share
2 answers

, , , , ?

, jQuery ajax- , , www.foo.com/bar.jpg www. foo.com/bar.jpg?1234567.

URL , , , .

, ?

0

, , , , . , , ajax , image/jpeg, base64_encoded, img, src Uri. jQuery, :

jQuery.ajax({
    url: imageURL,
    headers: {'Max-Age':0},
    success: function(d){
                jQuery(imgElement).attr('src','data:image/jpeg;base64,'+d);
             },
    error: function(){/*handle error*/},
    complete: function(){/* handle complete*/}
 });

. , .

0

More articles:


All Articles