Бывают случаи, когда нужно на лету проверить существование картинки. Для этого идеально подойдет 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.
(Пока оценок нет)
Загрузка...