Read the absolute redirected SRC attribute URL for an image

问题

I'm using the Twitter avatar API to fetch a user's avatar URL on the client-side, and I'd like to cache the response, but instead of a regular JSON (or indeed, any other type), they just issue a 302 redirect.

This doesn't work (because it's cross domain):

jQuery.getJSON('https://api.twitter.com/1/users/profile_image/60173.json',
function(data, status, jqxhr){
  console.log("data: ", data);
  console.log("status: ", status);
  console.log("jqxhr: ", jqxhr);
  console.log(jqxhr.getResponseHeader('Location'));
  console.log(jqxhr.getAllResponseHeaders());
})

Data is empty, status is 'success', jqhxr returns a jqxhr object, but the getResponseHeader() and getResponseHeaders() are null because it's a cross-domain call rather than a true XMLHTTP call.

So I thought I might be able to use the load() event to show the actual url of the image after the 302 had happened. I tried this:

function avatar_loaded(img) {
  console.log("We loaded an avatar for %s (img)[0].src is %o
attr('src') is %o getAttribute('src') is %o", img, jQuery(img)[0].src, jQuery(img).attr('src'), img.getAttribute("src"));
}

var avatar_url = "https://api.twitter.com/1/users/profile_image/60173";

jQuery('body').append("<img onload='avatar_loaded(this)' src='" +
avatar_url + "' width='0' height='0'>");

You'll see that the avatar_loaded function gets called twice. Once with the initial img src (https://api.twitter.com/1/users/profile_image/60173) and then again, presumably with the 302ed actual image url http://a1.twimg.com/profile_images/1272489576/Photo_38_normal.jpg

But I can't read the redirected absolute URL no matter what I try. Any other ideas?

EDIT: I Didn't want this to turn into a time-sink, so I just used the

http://api.twitter.com/1/users/show.json?user_id=

API call. I'd imagined that this would require an authenticated call for protected users, it doesn't so it's fine to use.

回答1:

Rather than use the

http://api.twitter.com/1/users/profile_image/<user_id>

API call, I used

http://api.twitter.com/1/users/show.json?user_id=

instead and extracted the avatar URL from there. It's not as light-weight because it returns a raft of other user data too, but even protected users avatars are returned without the need for authentication, so it's a suitable replacement.

回答2:

Here's code that loads it only once: http://jsfiddle.net/ionutzp/6Ekub/1/

avatar_loaded = function(img) {
  console.log("We loaded an avatar for %s (img)[0].src is %o attr('src') is %o getAttribute('src') is %o", img, jQuery(img)[0].src, jQuery(img).attr('src'), img.getAttribute('src'));
}

var avatar_url = "https://api.twitter.com/1/users/profile_image/60173";

$(window).load(function(){
        var img = new Image();
        $(img).load(function(){avatar_loaded(this)}).attr('src',avatar_url).appendTo('body');
       //jQuery('body').append("<img onload='' src='" + avatar_url + "' width='100' height='100'>");
});

来源：https://stackoverflow.com/questions/5421729/read-the-absolute-redirected-src-attribute-url-for-an-image

标签

javascript

jquery

image

redirect

twitter