Обработка недоступных картинок на сайте
Обработка недоступных картинок на сайте
Одно из неприятных явлений в Интернете - это "битые" ссылки, в частности ссылки на картинки. Сайты могут закрываться, переезжать, менять свою структуру, это естественный процесс. Хуже, когда от этого страдает ваш сайт. Если на сайте всего несколько страниц, то "битые" картинки вы сможете легко отследить самостоятельно, а о некоторых могут сообщить ваши посетители. Но если страниц много, то в большинстве случаев "битые" картинки могут висеть незамеченными достаточно долго. На своем хостинге их, в принципе, можно отследить по появлению ссылок в логе ошибок 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;
- }
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);
- ?>
Просмотров: 9058 | Комментариев: 11
Метки: JavaScript
Внимание! Статья опубликована больше года назад, информация могла устареть!
Комментарии
Отзывы посетителей сайта о статье
ManHunter
(06.11.2010 в 21:53):
Да, именно так.
Игорь
(06.11.2010 в 21:48):
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 это и есть та самая дефолтная картинка ?
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;
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?
А мне вот другое интересно: что получится, если будет недоступен скрипт-обработчик битой картинки (который .php)? Будет вечный цикл onerror?
Infocatcher
(02.06.2010 в 18:55):
Ну, допустим, сервер с картинкой может лежать или еще что-нибудь вре
Ну вот, срезало все после символа ударения ( http://ru.wikipedia.org/wiki/%...%D1%83%D1%82 ). =/
Хех, речь забыл. :D Если оригинал восстановим - лучше вернуть его.
Ну, допустим, сервер с картинкой может лежать или еще что-нибудь врЕменное. Или вот зашел - понравилось - сохранил и только потом заметил, что в середине потерялась картинка. Так что вреда же не будет, а пригодиться вполне может.
Что, интересно, будет у посетителя с медленным каналом после загрузки картинки только до половины? Если всплывет событие load, то не логично - скорее уж error. Но тут хорошо бы поставить эксперимент.
Ну вот, срезало все после символа ударения ( 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, вроде бы, события не всплывают. А весь прочий зоопарк проверять лениво.
Кстати, достаточно только одного обработчика:
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):
Так можно отслеживать не только недоступность картинок, но и вообще всего. То есть полностью мониторить "работоспособность" страниц сайта ))
Добавить комментарий
Заполните форму для добавления комментария
Материалы, опубликованные на этом сайте, не рекомендуются к просмотру лицам в возрасте до 16 лет без присутствия взрослых.
Вам помог этот сайт?
Поблагодарили 34,325 раз
Поблагодарили 34,325 раз
Буду очень благодарен, если размеcтите мою кнопочку:
 |
Яндекс ИКС: 380 |
 |
 |