Блог

Я обслуживаю свой веб-сайт с mywebsite.com. Я размещаю изображения на flickr, поэтому все изображения загружаются в браузер пользователя через запросы get на flickr. Многие пользователи моих веб-сайтов получают доступ mywebsite.com из корпоративных сетей, которые блокируют доступ к flickr.com. Это означает, что пользователи получают очень раздражающие пустые заполнители вместо изображений. У меня такая же проблема с кнопкой Facebook like. Это делает мой сайт очень непривлекательным для таких пользователей.

Есть ли способ, которым я могу запустить скрипт на стороне клиента, который проверит, является ли flickr.com , facebook.com И т.д. Доступны. Если нет, я мог бы изменить атрибут href изображения для загрузки из альтернативного источника или заменить стандартным изображением, объясняющим, что их сеть блокирует доступ. Я также мог бы удалить кнопку Facebook like.

Я думал, что HTTP-запрос XML сделает свое дело, но тогда, я думаю, я столкнусь с междоменными проблемами. Думаю, я мог бы также настроить прокси-сервер для обслуживания изображений, но я не хочу этого делать; идея этого в том, что flickr сокращает пропускную способность.

TLDR: как мне определить, является ли flickr.com доступен из браузера пользователя, используя технологию на стороне клиента.

Вы могли бы попробовать это…

 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';
  

Халтурно, но, похоже, работает. Однако он полагается на то, что favicon.ico 404ing означает, что основной сайт есть.

jsFiddle.

Рабочий пример: 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>
  

Для facebook вы можете просто включить Facebook JS API, а затем проверить, существует ли один из объектов / функций, которые он экспортирует.

Было бы лучше, если бы вы (ab-) не использовали внешние хостинги для своих материалов. Если вам нужен CDN, лучше используйте реальный…

У Flickr и Facebook есть API, которые поддерживают JSONP, поэтому междоменность не является проблемой. т. Е. Вот запрос, который просто повторяет некоторые фиктивные данные из API flickr.

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

Вы не можете надежно установить обработчики ошибок в запросе jsonp, поэтому показывайте «загружающееся» изображение до тех пор, пока не будет вызван этот успешный обратный вызов. Установите некоторый тайм-аут, по которому будет отображаться сообщение об ошибке, если ответ придет недостаточно быстро.

Это работает, но время ожидания должно быть установлено!

 $.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 должен вернуться:

 jsonCallback({response:'PONG'});