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

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

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

url для скриншота обычно, http://img.youtube.com/vi/ + видео.ID + / maxresdefault.формат JPG

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

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

10
ajax http-status-code-404 javascript jquery youtube

5 ответов

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

4

вы можете создать 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
    }
});

вот демо.

5

ответ minitech работает для проверки 404, однако...

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

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

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

1

это сработало для меня (мой в 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);
0

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

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

демо

0