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.

Solution 1

You could try this...

var image = new Image();

image.onerror = function() {

   var images = document
                 .getElementById('flicker-images')
                 .getElementsByTagName('img');

   for (var i = 0, imagesLength = images.length; i < imagesLength; i++) {
        images[i].src = 'images/flickr_is_blocked.gif';
   }

};

image.src = 'http://flickr.com/favicon.ico';

Hacky, but it seems to work. However it relies that the favicon.ico 404ing means the main site is.

jsFiddle.

Solution 2

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>

Solution 3

For facebook you can simply include the Facebook JS API and then test if one of the objects/functions it exports exists.

It would be better if you did not (ab-)use external hosts for your stuff. If you want a CDN, better use a real one...

Comments

[planetjones]

thanks - I don't think I'm abusing external hosts... flickr community guidelines say they're happy to show your photos on your website, provided you link the image back. That's what I'm doing - they are photos, not template graphics etc. that I agree are my problem to serve.

[planetjones]

That looks a good solution - I didn't think of doing that. So the onerror handler can replace all my images href attributes with "flickr_is_blocked.gif". Will give this a shot tonight and feedback. Thanks.

[user3167101]

@planetjones Yep, in fact, I'll edit it to make it do just that, assuming you mean src attribute :)

[planetjones]

Thanks Peeter - I guess that's a nice JQuery way of going about it. The bit I'd not considered doing was the error handler for the image load.

[planetjones]

yep that's the one! although I might remove href too from the enclosing anchor (or remove the anchor altogether!), as clicking it won't get the user very far! thx again - I think this will do the trick nicely

[user3167101]

You could just place the callback like load(callback).

[Peeter]

You're correct alex, done :) @planetjones: I updated the answer, should be clearer now.

[user3167101]

@Peeter Sorry, me again :P. You are better off using removeAttr('href') to make the a elements inactive.

[Peeter]

Used removeAttr (I always thought href was a required attribute but googeling proved me wrong), but added back the wrapping callbacks into anon functions's. For some reason your proposed version called both of the callbacks.

[user3167101]

@Peeter you can only pass the function name, otherwise you need to wrap it in an anonymous function.

[planetjones]

There's an interesting phenomenon here. In Internet Explorer (v8 at least) if you use image.src = 'flickr.com/favicon.ico'; then it will call the onerror handler, even if the favicon is accessible. It would seem that IE raises the error when retrieving .ico files into an image. So my advice is always check on a genuine image format i.e. I'm just pointing to a .jpg of mine on flickr

[mjhm]

Thanks for this. Confirmed that the jsFiddle above works in latest versions of FF(10), Chrome(17), and IE(9).

[m.spyratos]

Just for those interested. This doesn't seem to work on Windows Phones. As @planetjones mentioned, favicon.ico always returns error.