Обработка недоступных картинок на сайте

30.05.2010 | Категория: Web-мастеру и не только | Автор: ManHunter

Обработка недоступных картинок на сайте

Одно из неприятных явлений в Интернете - это "битые" ссылки, в частности ссылки на картинки. Сайты могут закрываться, переезжать, менять свою структуру, это естественный процесс. Хуже, когда от этого страдает ваш сайт. Если на сайте всего несколько страниц, то "битые" картинки вы сможете легко отследить самостоятельно, а о некоторых могут сообщить ваши посетители. Но если страниц много, то в большинстве случаев "битые" картинки могут висеть незамеченными достаточно долго. На своем хостинге их, в принципе, можно отследить по появлению ссылок в логе ошибок 404 (страница не найдена), а если изображения находятся на другом сервере?

Я придумал способ, который позволяет автоматизировать процесс обнаружения "битых" картинок на сайте. Он основан на том, что при недоступности какого-либо внешнего объекта возникает ошибка, которая генерирует событие onerror. Перехватив и обработав это событие, можно уведомить администратора сайта о возникшей проблеме. Обработчик состоит из трех частей: первая часть выполняется в браузере посетителя сразу после загрузки страницы и устанавливает перехватчик на все картинки на странице.

Code (JavaScript) : Убрать нумерацию

// Кроссбраузерная установка перехватчика ошибок на все картинки
var obj = document.getElementsByTagName('img');
for(var i = 0;i<obj.length;i++) {
if (obj[i].addEventListener) {
obj[i].addEventListener('error', handle_error, false);
}
else {
obj[i].attachEvent('onerror', handle_error);
}
}

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

Code (JavaScript) : Убрать нумерацию

// Обработчик битых картинок
function handle_error(e) {
e = e ? e : window.event;
var imgElem = e.target ? e.target : e.srcElement;
imgElem.src='error_picture.php?src='+imgElem.src+'&page='+document.location.href;
}

И, наконец, третья - серверная часть, выполненная в виде PHP-скрипта. Она получает и обрабатывает битую ссылку, делает запись в лог или отправляет уведомление администратору сайта, а затем возвращает дефолтное изображение.

Code (PHP) : Убрать нумерацию

<?
//--------------------------------------------------------------------
// Серверный обработчик битых ссылок
//--------------------------------------------------------------------
// Прочитать дефолтную картинку с диска
$f=@fopen('error.gif','r');
Header('Content-type: image/gif');
// Передать ее в браузер
echo fread($f,filesize('error.gif'));
fclose($f);
// Получить ссылку на страницу с битой ссылкой и саму битую ссылку
$f=fopen('error.log','a+');
$str = "Date: ".date("d.m.Y H:i:s")."\r\n";
$str .= "Picture: ".$_GET['src']."\r\n";
$str .= "URL: ".$_GET['page']."\r\n";
$str .= "------------------\r\n";
// Записать данные в лог-файл
fwrite($f,$str);
fclose($f);
?>

Как все это работает? После загрузки страницы каждой картинке добавляется обработчик события onerror. При возникновении ошибки (битая ссылка на картинку), управление передается обработчику ошибки. Он получает адрес картинки из тега img, адрес страницы, на которой произошло событие, а затем подменяет битую ссылку ссылкой на PHP-скрипт, передавая ему в качестве параметров адрес картинки и страницы. Скрипт на сервере сохраняет в лог полученную информацию об ошибке, читает файл с дефолтным изображением и отдает его в браузер вместо битой картинки. Пример работы можете посмотреть у меня на сайте.

Просмотров: 9196 | Комментариев: 11

Метки: JavaScript

Внимание! Статья опубликована больше года назад, информация могла устареть!

RewriteCond %{REQUEST_FILENAME} .*jpg$|.*gif$|.*png$ [NC]
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !vashsait.ru [NC]
RewriteCond %{HTTP_REFERER} !yandex.ru [NC]
RewriteCond %{HTTP_REFERER} !google. [NC]
RewriteCond %{HTTP_REFERER} !search?q=cache [NC]
RewriteRule (.*) error.gif

А error.gif это и есть та самая дефолтная картинка ?

ManHunter (06.11.2010 в 20:58):

Это делается через .htaccess

Игорь (06.11.2010 в 19:39):

Привет. А как реализовать, чтобы картинки отображались только на своем сайте, а на других сайтах эти картинки (скопипастенные) отображались ввиде Дефолтной картинки.

Infocatcher (03.06.2010 в 20:09):

С зацикливанием проще - можно проверять адрес картинки, вызвавшей событие error. Что-то вроде такого:
var newSrc = ...;
if(img.src != newSrc)
img.src = newSrc;

Правда, лучше через что-нибудь навроде img.src.indexOf(newSrc) проверять, если newSrc - относительный (как в примере).

P.S. А мелкомягким давно пора по тому, что у них заместо головы, надавать:
var s = "89"; "0123456789".substr(-s.length) == s;

ManHunter (03.06.2010 в 08:01):

Поправил парсер, больше не должен жрать непечатные буквы.

А мне вот другое интересно: что получится, если будет недоступен скрипт-обработчик битой картинки (который .php)? Будет вечный цикл onerror?

Infocatcher (02.06.2010 в 18:55):

Ну, допустим, сервер с картинкой может лежать или еще что-нибудь вре

Ну вот, срезало все после символа ударения ( http://ru.wikipedia.org/wiki/%...%D1%83%D1%82 ). =/

Хех, речь забыл. :D Если оригинал восстановим - лучше вернуть его.

Ну, допустим, сервер с картинкой может лежать или еще что-нибудь врЕменное. Или вот зашел - понравилось - сохранил и только потом заметил, что в середине потерялась картинка. Так что вреда же не будет, а пригодиться вполне может.
Что, интересно, будет у посетителя с медленным каналом после загрузки картинки только до половины? Если всплывет событие load, то не логично - скорее уж error. Но тут хорошо бы поставить эксперимент.

ManHunter (01.06.2010 в 23:49):

Для посетителя какая разница, в каком виде ему будет показываться НЕДОСТУПНАЯ картинка? Это ж все задумано, чтобы автоматически и как можно быстрее уведомить админа, что у него что-то поломалось.
А мысль на счет глобального перехватчика ошибок я подумаю :)

Infocatcher (01.06.2010 в 23:34):

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

Кстати, достаточно только одного обработчика:
javascript: window.addEventListener("error", function(e) { alert(e.target.src); }, true); document.images[0].src = "notFound"; void 0;

В Firefox работает. =)
В IE, вроде бы, события не всплывают. А весь прочий зоопарк проверять лениво.

user (01.06.2010 в 14:41):

Мдя... всё гениальное просто...

64-ядерный процессор (29.05.2010 в 00:26):

Так можно отслеживать не только недоступность картинок, но и вообще всего. То есть полностью мониторить "работоспособность" страниц сайта ))

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

Заполните форму для добавления комментария

Если программист в девять утра уже на работе, значит он там же и ночевал

Главная страница Web-мастеру и не только Образ мышления: Assembler Мои программы Software Темная сторона Силы Обзоры техники А еще я туда ем! Жизнь в оффлайне Всякая всячина

Карта сайта Ссылки Обратная связь Правила сайта Настройки сайта RSS-канал

Материалы, опубликованные на этом сайте, не рекомендуются к просмотру лицам в возрасте до 16 лет без присутствия взрослых.

Метки статей

Свернуть

Вам помог этот сайт?

Поблагодарили 35,328 раз

День кадрового работника

Всемирный день борьбы с артритом

Нашли на сайте орфографическую ошибку? Выделите ее мышкой и нажмите

Ctrl

Enter

Буду очень благодарен, если размеcтите мою кнопочку:

<a href="https://www.manhunter.ru" target="_blank"><img src="https://www.manhunter.ru/images/button.gif" alt="Личный блог ManHunter'а" title="Личный блог ManHunter'а" width="88" height="31" /></a>

$Яндекс тИЦ: {YANDEX_TIC}$

Яндекс ИКС: 360

Сейчас я слушаю

---

- автообновление

Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2024
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.07 сек. / MySQL: 2 (0.0038 сек.) / Память: 4.5 Mb

	2024 - ОКТЯБРЬ
Пн	Вт	Ср	Чт	Пт	Сб	Вс
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

Обработка недоступных картинок на сайте

Комментарии

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