Check if the URL is accessible from a web browser, i.e. Make sure it is not blocked by the proxy server.

Question

I serve my site with mywebsite.com. I host images on flickr, so all images are uploaded to the user browser via flickr requests. Many of my website users access mywebsite.com from corporate networks that block access to flickr.com. This means that users get very annoying blank placeholders instead of images. I have the same problem with a Facebook button as a button. This makes my site very unattractive to such users.

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

I thought the XML query would do the trick, but then I would name cross-domain problems, which I think. I guess I could also set up a proxy server for working with images, but I do not want to do this; the idea behind this is that flickr takes bandwidth.

TL; DR: how to determine if flickr.com is accessible from a user’s browser using client-side technology.

Answer 1

You can 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, he believes favicon.ico 404ing means the main site.

jsFiddle .

Answer 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> 

Answer 3

For facebook, you can simply enable the Facebook JS API and then check if one of the objects / functions that it exports exists.

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

Answer 4

Flickr and Facebook have APIs that support JSONP, so a cross-domain is not a problem. those. here is a query that just echoes some dummy data from the flickr API.

 $.ajax({ url: "http://www.flickr.com/services/rest/?jsoncallback=?", dataType: 'json', data: {method: "fickr.test.echo", format: "json", api_key: "02de950d65ec54a7a057af0e992de790"}, success: callback }); 

You cannot reliably install error handlers in jsonp reqest, so show a “loadable” image until this callback is called. Set some waiting time that will display an error message if the response is not fast enough.

Answer 5

This works, but the wait time must be set!

 $.ajax({ url: "http://example.com/ping.html", type: 'GET', dataType: 'jsonp', jsonpCallback: 'jsonCallback', timeout: 1000, cache: false, success: function(response) { console.log("SERVER UP!"); }, error: function(e) { console.log("SERVER DOWN!"); } }); 

ping.html should return:

 jsonCallback({response:'PONG'});