在不缓存跨域的情况下获取图像或其标题

Question

I'm trying to retrieve an image's size without caching it (for valid reasons) or get its Content-Length header without downloading the image itself. I need this information to match the remote image with a control one (if there is another way to achieve that with these constraints, I'm all ears). The server is out of my control. Here is what I've tried so for:

1. With this script I can easily get the image, but can't prevent its caching:

    var img = new Image(); img.src = 'http://www.nasa.gov/sites/default/themes/NASAPortal/images/nasa-logo.gif';

2. With this I get the headers in the debugger but I can't access them:

    $.ajax({ url: 'http://www.nasa.gov/sites/default/themes/NASAPortal/images/nasa-logo.gif', type: 'HEAD', success: function(data){ console.log(data); } });

3. With this I get the image without caching, but I can't access its properties:

    <iframe src="http://www.nasa.gov/sites/default/themes/NASAPortal/images/nasa-logo.gif"></iframe>

4. I've tried every JSONP combination, including converters and dataFilter with no success.

5. I've explored the possibility to download just the first n bytes of the image (so that caching wouldn't be a problem), but it only seems possible with AJAX, which blocks the attempt because it's cross-domain and JSONP doesn't seem to work either.

In summary, I've tried everything I could read and think about... I spent the last 48 hours (and hundreds of fiddles) looking for a solution. I have the constant feeling that with the above pieces, there should be a way...

What am I missing?

Answer 1

How about just adding a querystring to avoid caching

var img  = new Image();
var rand = (new Date()).getTime();;

img.src  = 'http://www.nasa.gov/ ... /images/nasa-logo.gif?r=' + rand ;

Answer 2

You can serve your images with the following response header:

Cache-Control:no-cache, no-store

That will prevent the browser from caching it, including proxy servers.

Answer 3

您可以获取系统毫秒并在 url 末尾添加 '?time='+milliseconds，大多数 http 缓存都以 url 为键，因此您可以在每次请求时获得新图像