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

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

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

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

Возможно ли подобное?

Ответы

Ответ 1

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

как это,

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

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

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

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

Ответ 2

Try:

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
}

Ответ 3

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

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

Ответ 4

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

Ответ 5

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

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

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

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

Ответ 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
    }
});