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

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.