Можно ли проверить, возвращает ли файл ошибку 404, если она на другом сервере с javascript или jQuery?

Можно ли проверить, возвращает ли файл ошибку 404, если она находится на другом сервере с помощью jQuery/javascript?

Я использую youtube api, чтобы получить скриншот HD для видео, которое я встраиваю, но JSON, который он возвращает, не показывает, существует ли скриншот HD для видео.

URL для скриншота обычно, http://img.youtube.com/vi/ + video.ID +/maxresdefault.jpg

но когда он не существует, я получаю этот уродливый серый цвет POS с низким разрешением: http://img.youtube.com/vi/MAyTES9gDAU/maxresdefault.jpg

Итак, в основном, я хочу проверить, существует ли скриншот, а если нет, примените display: none к div, который его удерживает.

Ответы

Ответ 1

Создайте элемент <img>, указывающий на это изображение, затем обработайте событие onerror и скройте его.

Ответ 2

Вы можете создать объект Image и обработать onload и onerror. Это будет работать только для изображений, ум.

function checkExists(imageUrl, callback) {
    var img = new Image();

    img.onerror = function() {
        callback(false);
    };

    img.onload = function() {
        callback(true);
    };

    img.src = imageUrl;
}

Используйте его следующим образом:

checkExists(yourVideoUrl, function(exists) {
    if(!exists) {
        // Hide the image
    }
});

Вот демо.

Ответ 3

minitech отвечает за проверку 404, однако...

Для случая с YouTube у них есть своя обработка, а не 404, они дают вам "приятное" изображение ошибки.

У YouTube есть API, который проверяет, действительно ли идентификатор видео. Проверьте это сообщение, в котором рассказывается, как проверить, существует ли или нет идентификатор видео YouTube: https://groups.google.com/forum/?fromgroups=#!topic/youtube-api-gdata/oAztQ3f1tcM

Как только вы подтвердите, что видео существует, вы можете попытаться загрузить изображение. Если видео не существует, вы можете обрабатывать этот случай, как хотите.

Ответ 4

Это сработало для меня (мой находится в coffeescript).

checkImages = ->
  $("img").each ->
    $(this).error ->
      $(this).attr("src", "../default/image.jpg")

$(document).on('page:load', checkImages)

Я предполагаю, что эквивалент javascript - это что-то вроде

function checkImages() {
  $("img").each(function() {
    $(this).error(function() {
      $(this).attr("src", "../default/image.jpg");
    });
  });
};

$(document).on("page:load", checkImages);

Ответ 5

Вам нужно добавить дополнительную проверку для серого изображения по умолчанию:

function checkExists(imageUrl, callback) {
    var img = new Image();

    img.onerror = function() {
        callback(false);
    };

    img.onload = function() {
        //check for a default (grey) image
        if (this.width == 120) {
           callback(false);
        }else {
           callback(true);
        }
    };

    img.src = imageUrl;
}

Демо