jQuery: проверьте, существует ли изображение

Question

Я загружаю путь к изображению через jQuery $ .ajax, и прежде чем показывать изображение, я хотел бы проверить, существует ли оно на самом деле.Могу ли я использовать событие загрузки / готовности изображения или что-то подобное для определения правильности пути к файлу?

Если для .myimage установлено отображение: нет, я надеюсь сделать что-то вроде

$(".myimage").attr("src", imagePath);
$(".myimage").load(function() {
    $(this).show();
});

Возможно ли что-нибудь подобное?

Answer 1

Ну, вы можете связать .error() обработчик ...

вот так,

$(".myimage").error(function(){
  $(this).hide();
});

ну, у вас все в порядке уже с нагрузкой-event

$(".myimage").load(function() {
    $(this).show();
});

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

Answer 2

Попробуйте:

function urlExists(testUrl) {
 var http = jQuery.ajax({
    type:"HEAD",
    url: testUrl,
    async: false
  })
  return http.status;
      // this will return 200 on success, and 0 or negative value on error
}

затем используйте

if(urlExists('urlToImgOrAnything') == 200) {
    // success
}
else {
    // error
}

Answer 3

Старая ветка, которую я знаю, но я думаю, что она может быть улучшена. Я заметил, что у OP были периодические проблемы, которые могли быть вызваны одновременной загрузкой изображения и проверкой ошибок. Было бы лучше сначала разрешить загрузку изображения, а затем проверять наличие ошибок:

$(".myimage").attr("src", imagePath).error(function() {
    // do something
});

Answer 4

Поскольку вы уже делаете запрос AJAX, я бы разгрузил его на серверное приложение, которое поддерживает ваш AJAX.Это тривиально, чтобы проверить, существует ли файл с сервера, и вы можете установить переменные в данных, которые вы отправляете обратно, чтобы указать результаты.

Answer 5

Этому вопросу пару лет, но вот лучший пример использования обработчика ошибок для всех, кто смотрит на это.

$("img")
  .error(function(){
    $(this).hide();
  })
  .attr("src", "image.png");

Вам нужно прикрепить обработчик ошибок, прежде чем пытаться загрузить изображение, чтобы перехватить событие.

Источник: http://api.jquery.com/error/

Answer 6

Вот что я сделал для себя:

$.get( 'url/image', function(res){ 
    //Sometimes has a redirect to not found url
    //Or just detect first the content result and get the a keyword for 'indexof'
    if ( res.indexOf( 'DOCTYPE' ) !== -1 )  {
        //not exists
    } else {
        //exists
    }
});