Test if URL is accessible from web browser i.e. make sure not blocked by Proxy server

Question

I am serving my website from mywebsite.com. I host images on flickr so all images are loaded in the user's browser via get requests to flickr. Many of my websites users access mywebsite.com from corporate networks, which block access to flickr.com. This means users get very annoying blank placeholders instead of the images. I get the same problem with the Facebook like button. This makes my site look very unattractive to such users.

Is there a way I can run a client side script which will check if flickr.com, facebook.com, etc. are accessible. If not I could change the href attribute of the image to load from an alternate source, or replace with a standard image explaining that their network is blocking access. I could also remove the Facebook like button.

I thought an XML http request would do the trick, but then I'd hit cross domain issues I think. I guess I could also set up a proxy to serve the images, but I don't want to do that; the idea of this is that flickr takes the bandwidth hit.

TLDR: How do I determine if flickr.com is accessible from a user's browser, using client side technology.

Answer 1

Working example: http://jsfiddle.net/peeter/pW5wB/

JS:

$(document).ready(function() {

    var callbackOnSuccess = function(src) {
        alert("Successfully loaded " + src);
        return false;
    };
    var callbackOnFailure = function(src) {

        alert("Failed loading " + src);

        // Here you can do whatever you want with your flickr images. Lets change the src and alt tags
        $(".flickr").attr("src", "flickr_is_blocked.gif");
        $(".flickr").attr("alt", "Flicker is blocked");
        // Lets change the parents href to #
        $(".flickr").parent().removeAttr("href");
        return false;
    };

    checkAvailability("http://flickr.com/favicon.ico", callbackOnSuccess, callbackOnFailure);


});

function checkAvailability(src, callbackSuccess, callbackFailure) {
    $("<img/>").attr("src", src).load(function() {
        callbackSuccess(src);
    }).error(function() {
        callbackFailure(src);
    });
}

HTML:

<a href="http://flickr.com/favicon.ico">
    <img class="flickr" src="http://flickr.com/favicon.ico" alt="Flickr"/>
</a>