Отсутствующие изображения
22 января 2010 года
JavaScript
JavaScript
- Содержание
Браузеры показывают отсутствующие изображения по разному: крестик в рамочке, содержимое атрибута alt. В любом случае они не могут украсить ваш сайт, поэтому необходимо принять меры для их стилизации, удаления или оповещении на электронную почту.
Отсутствующие изображения вызывают событие onError в ответ на ошибку сервера 404. Его мы и будет использовать.
1. Удаление
Вариант удаления для Mootools
$$('img').addEvent('error',function() {
this.dispose();
});
Вариант удаления для JQuery
$('img').error(function() {
$(this).remove();
});
2. Стилизация
Вариант стилизации для Mootools
window.addEvent('domready',function() {
$$('img').addEvent('error',function() {
this.set({
src: '/img/missing-image.jpg',
alt: 'Изображение недоступно',
styles: {
width: 50,
height: 50
}
});
});
});
Вариант стилизации для JQuery
$(document).ready(function() {
$('img').error(function() {
$(this).attr({
src: '/img/missing-image.jpg',
alt: 'Изображение недоступно',
style:'width:50px; height:50px;'
});
});
});
3. Оповещение
Этот вариант укажет на отсутствующие изображения, но учтите, что почтовый ящик может быстро переполниться при хорошей посещаемости ресурса,
Вариант оповещения для Mootools
window.addEvent('domready',function() {
$$('img').addEvent('error',function() {
var notification = new Request({
url: 'image-error.php',
method: 'post',
data: {
'image': this.get('src'),
'page': window.location.href
}
}).send();
});
});
Вариант оповещения для JQuery
$(document).ready(function() {
$('img').error(function() {
$.post('image-error.php', {
image: $(this).attr('src'),
page: window.location.href
});
});
});
А как вы решаете эту проблему?
Понравилась статья? Подпишись на RSS.
Комментарии
Здесь пока никто не писал.