Javascript вместо loading.gif

В веб приложениях, когда пользователь ожидает результаты какого-либо процесса, часто ему показывается анимированное изображение, говорящее о том, что приложение выполняет какие-то действия и пользователю нужно подождать. Чаще всего это картинка loading.gif.

Я не являюсь сторонником использования графики в веб-дизайне, потому что загрузка графики создает лишнюю нагрузку на сервер, увеличивает время ожидания при открытии страницы и в первую очередь потому что эту графику нужно специально создавать отвлекаясь от основного процесса — программирования и верстки.

Занимаясь очередным новым проектом, я задумался, как будет выглядеть loading.gif на этом сайте. Поскольку дизайн сайта в целом достаточно оригинальный, детали тоже должны выглядеть по-особому. Лезть во флеш не хотелось. Плюс, когда я пробовал сделать gif-анимацию во флеше, результат почему-то получался очень низкого качества, поэтому ранее я просто использовал loading.gif из ВКонтакте или Facebook.

В этот раз мне пришла такая идея: заменить эту картинку кодом. Здесь видится несколько вариантов. Первый — это dom-анимация. Второй — это canvas-анимация.

Я решил использовать первый вариант и для пробы сделать что-то похожее на loading.gif из Facebook. Вот что получилось.

CSS:

.loading div {
	opacity: 0;
	border: 1px #a6a6a6 solid;
	box-shadow: inset 0px 0px 3px #000;
	-moz-box-shadow: inset 0px 0px 3px #000;
	-webkit-box-shadow: inset 0px 0px 3px #000;
	background-color: #ebebeb;
	float:left;
}

Javascript (используется jquery):

function loadingShow(obj, time){
	obj.animate({'opacity': 1}, time, function(){
		loadingHide(obj, time);
	});
}

function loadingHide(obj, time){
	obj.animate({'opacity': 0.3}, time, function(){
		setTimeout(function(){
			loadingShow(obj, time);
		}, 500);
	});
}

setInterval(function(){
	$('.loading').each(function(){
		var obj = $(this);
		if(obj.children('div').length>0) return;
		var w = 30;
		var h = 50;
		obj.append('<div style="width:'+w+'px;height:'+h+'px"></div>');
		obj.append('<div style="width:'+w+'px;height:'+h+'px"></div>');
		obj.append('<div style="width:'+w+'px;height:'+h+'px"></div>');
		obj.append('<div style="clear:both"></div>');
		var i = 0;
		var time = 100;
		obj.children('div').each(function(){
			i++;
			var obj = $(this);
			setTimeout(function(){
				loadingShow(obj, time*2);
			}, i*time);
		});
	});
}, 100);

Чтобы добавить анимацию, нужно сделать что-то вроде:

dom_object.append('<div class="loading"></div>');

Плюсы такого подхода:

1. Нет необходимости создавать графику
2. Снижается нагрузка на сервер, увеличивается скорость загрузки страницы
3. Анимацию можно легко подкорректировать программным путем

Минусы такого подхода:

1. При переключении между табами в браузере тайминг сбивается

Тестировал только в Google Chrome. Указанный минус даже не важен, поскольку эта анимация показывается как правило очень короткое время, — переключиться между табами даже не успеешь.