Отсутствующие изображения на вашем сайте могут показать вас или то, что вы предлагаете не с лучшей стороны. Со временем изображения по тем или иным причинам могут быть удалены без вашего ведома. В этом случае браузеры предлагают посетителю альтернативный контент. К несчастью у каждого браузера своё видение того, как этот контент представить и не всегда это выглядит лучшим образом.
В качестве альтернативного решения можно использовать jQuery и специально подготовленное изображение, которое будет отображаться вместо отсутствующих картинок.
Создайте изображение, подключите фреймворк и добавьте следующий javascript код:
$(document).ready(function() { $('img').error(function() { $(this).attr({ src: 'missing.png', style:'border:3px solid #999;width:144px;height:144px;' }); }); });
Loading ...
Отличная идея, неплохо было бы еще добавить вот это:
Для объекта image событие error вызывается при некорректном содержимом атрибута src – например, несуществующий файл. (копипаста с linkexchanger.su)
Задача не в том, чтобы показать посетителю красивую пофигушку. Задача а в том, чтобы вебмастер вовремя узнал об ошибке на сайте и исправил её.
Не понимаю я этой тенденции везде где можно и где нельзя использовть js, да еще и с библиотеками. Ну, хорошо, если jQuery и так уже зачем-то подключена, и, к примеру, без нее сайт не работает (а чего, впрочем, в этом хорошего?). А если скрипты используются только для создания подобных «рюшечек», как это часто бывает?
Есть намного более дешевый и универсальный, хотя и не столь элегантный, способ. В стилях всем (ну, или не всем) img прописывается background, в качестве которого ставится картинка с надписью вроде «Изображение еще не загружено или недоступно». Можно еще прикинуть, сколько времени в нормальных условиях занимает загрузка страницы, и подложить анимированный гиф, который показывает сообщение о недоступности изображения спустя заданное время.
Чтобы вебмастер узнал об ошибке, совершенно не обязательно исполнять код на стороне клиента. Логи читать иногда надо, и будет Щастье.
DiamodnSteel, не всегда вебмастер сразу узнаёт о том, что изображение на которое он когда-то там ссылался уже удалено.
Георгий, согласен с вами в том, что подключать подобные js библиотеки исключительно ради подобных вещей не очень разумно. Но не стоит воспринимать подобные заметки как панацею. Это всего лишь еще один способ. Ну и ваш пример немного не по теме. Речь идёт именно об изображениях которые отсутствуют, а не в процессе загрузки.
Георгий, можно поподробнее про логи.
В логах для удаленных изображений будет 404.
Использовать картинки, лежащие на чужом сервере, я считаю моветоном. Если же сервер не чужой, а просто отдельный (что оправдано для проектов с высокой нагрузкой), читать надо, соответственно, его логи. И фильтровать по рефереру на всякий случай. С задачей периодически делать это самостоятельно, и, если что, пинать вебмастера, способен справиться примитивный скрипт.
Хотя, конечно, не панацея, да.
Не, бэкграунд хорош – но он не решает проблемы – размер плейсхолдера, надпись, рамочку и иконку отсутствующего изображения. Все это в этом посте ставится в проблематику. И альты нужны не если изображение отсутствует, а из соображений доступности – если картинки в браузере отключены или пользователь слепой. Подмена картинки на заглушку никак не связана с альттекстом. Этот прием хорош только при публикации картинки из внешнего источника.
А по поводу логов – да error_log будет фиксировать запрос несуществующего ресурса. Но для внешних картинок, еррор лог придется читать на внешнем сервере, что как правило невозможно.
[...] статьи – Alex IlinПонравилась статья? Тогда подпишитесь на RSS, чтобы [...]
[...] альтернатива, незагруженным или уже несуществующим картинкам на [...]
Спасибо, хороший вариант решения. Я думал что все делается проще.. Например фон у изображения).
Красивый вариант. По крайней мере даст понять пользователю, что тут не просто пусто – не все же понимают, что должна быть картинка
Вся проблема этого примера в том, что приходится давать определенный класс картинке.
WebMast, давать класс совершенно не обязательно. Я просто использовал класс в примере.
А как без класса сделать?
Просто сделать без него.
У меня без класса не работает.
Должно работать. Проверяйте код, всё ли правильно написали.
Копирую код Вашего примера, копирую библиотеку, запускаю страницу – работает, убираю class – не работает.
А вы класс убираете только из HTML кода?
Ага, в JS не убрал, спс.
Хм, а скрипт работает только на изображения с абсолютным путем? С относительным не работает?
Должен работать и с относительным.
C относительными не работает.
А как сделать так, чтобы картинку с отсутствующим изображением не растягивал аттрибут alt за ее пределы, если в АЛТЕ очень много текста?
Вроде бы если размеры у изображения прописаны, альтернативный текст не должен его растягивать.
а как js будет выглядить или где стереть там?
Если вы про класс
missing, то его надо и из скрипта убратьА возможо ли сделать, чтобы если я имею квадратный исходник(missing.png) скажем 550пикс, а пропавшее изображение было размерами 521*300. Исходник растянется, или просто будет обрезан? Меня бы устроил 2-й вариант…
Если на изобажении была ссылка, возможно будет её автоматическое прикрепление к missing.png?
По умолчанию у missing.png останутся размеры исходного изображения, если в скрипте не указать другие.