Как на js проверить наличие фото

Бывают случаи, когда нужно на лету проверить существование картинки. Для этого идеально подойдет JavaScript. Более того в его арсенале найдется несколько способов проверки картинки на существование. Рассмотрим подробнее.

Проверка на существование картинки

Пусть у нас есть такая картинка: <img src="picture.jpg"/>. Нам нужно вывести сообщение в том случае если картинка существует или отсутствует.

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

  • onload - отвечает за успешную загрузку изображений, скриптов, ифреймов и т.п.
  • onerror - срабатывает, если при загрузке произошла ошибка.

Вставим события прямо в картинку: <img src="picture.jpg" onload="alert('Файл существует!');" onerror="alert('Файл не найден');"/>

Теперь при загрузке страницы всегда будет выводиться одно из сообщений об успешной или неудачной загрузке.

Давайте переделаем пример в более практичный вариант. Возьмем страницу сайта и прогоним все его картинки через each цикл. Если в каком-то теге img будет отсутствовать изображение, то заменим его src на картинку по умолчанию.

Заменить все не существующие картинки на сайте

<script>
$(document).ready(function(){
$('img').each(function(){
$(this).error(function(){ $(this).attr('src', 'noimg.png'); });
});
});
</script>

Просто вставьте скрипт выше на ваш сайт и он сразу заработает! Теперь если вы случайно или принудительно удалите картинку или поставите не правильный путь к ней, то скрипт заменит ее src на картинку по умолчанию (noimg.png).

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

Третьим методом проверки картинок может служить ajax запрос на php файл, который и будет проверять url изображения. Но этот способ я не буду рассматривать, так как он требует намного больше кода и подключение к файлу php.

 

 

 

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *


Введите капчу: