Отсутствующие изображения

  • Содержание

Браузеры показывают отсутствующие изображения по разному: крестик в рамочке, содержимое атрибута 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.

Создание иконок и прелоадеров Ограничить область видимости

Комментарии

Здесь пока никто не писал.