Оптимизация скриптов
 

Добрый день!

Приведу пример сложности с которой столкнулся:

<a href="/"><img src="i.jpg" onload="EffectHoverImageParent(this)" /></a>

Стили:

a {width:60px;height:90px;display:block;float:left;margin:0;overflow:hidden;text-decoration:none;}
a img{position:relative;}

Скрипт ниже, делает так, чтобы при наведении на ссылку изображение уменьшается, чтобы вписаться в рамку 60х90. А когда убираем курсор со ссылки то изображение возвращается в исходное состояние (100% размер и отцентровано в блоке, что не влазит, то скрывается). Получается некий эффект зумма при наведении. Вот собственно сам скрипт (не рекомендую особо вникать в этот сумбур кода, т.к. соль вопроса не в этом):

function EffectHoverImageParent(el) {
	var iW=$(el).width();
	var iH=$(el).height();
	var iWp=$(el).parent().width();
	var iHp=$(el).parent().height();
	var iL=(iWp-iW)/2;
	var iT=(iHp-iH)/2;
	var iHh=iHp; var iWh=iHh*iW/iH; var sP='height';
	if(iWh<iWp) { iWh=iWp; iHh=iWh*iH/iW; sP='width'; }
	var iLh=(iWp-iWh)/2;
	var iTh=(iHp-iHh)/2;
	$(el).css('left',iL+'px').css('top',iT+'px').css('opacity','0.8');
	if(sP='height') {
		var oP={'opacity':'0.8','height':iH+'px','top':iT+'px','left':iL+'px'};
		var oPh={'opacity':'1.0','height':iHh+'px','top':iTh+'px','left':iLh+'px'};
	}
	else {
		var oP={'opacity':'0.8','width':iW+'px','top':iT+'px','left':iL+'px'};
		var oPh={'opacity':'1.0','width':iWh+'px','top':iTh+'px','left':iLh+'px'};
	}
	
	$(el).hover(
		function(){
			var $this = $(this);
			$this.stop().animate(oPh,150);
		},
		function(){
			var $this = $(this);
			$this.stop().animate(oP,150);
		}
	);
}

Сайт который использует данный скрипт построен на AJAX и страницы подгружаются динамически. И чем больше таких картинок отобразилось на экране, тем больше начинает тормозить браузер. Следовательно скрипт написан далеко не профессионально. Значит мне нужно понять свои ошибки и научиться писать правильно.
Теория о том, где ошибка
Думаю я неэффективно использую память ПК. На все подгруженные картинки навешивается свойство $(el).hover(...,...);, которое видимо хранится в оперативе и т.п. Видимо когда таких картинок пару сотен, то оператива не слабо заполняется, отсюда идут глюки... Нужно отказаться от hover и использовать стандартные способы навешивания функций на события?
Подскажите, в ту сторону ли я копаю, или я допустил совершенно другие ошибки? Может быть есть некий принцип написания кода, так сказать некий образец, чтобы не допускать утечек памяти ... ткните носом, что мне нужно подучить ...

Спасибо!

greatilya,
Вообще т для картинок лучше использовать готовые галлереи, подгружающих динамически полномасштабную картинку, одна из неплохих отечественных => Iload => http://studioad.ru/index/0-8

какая логическая цепочка :) к сожалению, она не полностью верна - многий говнокод может работать нормально. он немного другие отличия от совершенного имеет.

да. а точнее, использовать "делегирование событий", который в jquery представлен функцией live.

Deff,
я не старался изобрести lightbox, а части моего коды были подсмотрены из готового зуммера, но его функционал несколько отличался от моих задач.


melky,
понятно, спасибо! а вот меня тут только всё терзает вопрос, например у нас есть такое (пример взят по предложенной вами ссылке):

<div id="content">
  <ul id="menu">
    <li><a class="button" href="/php">PHP</a></li>
    <li><a class="button" href="/html">HTML</a></li>
    <li><a class="button" href="/javascript">JavaScript</a></li>
    <li><a class="button" href="/flash">Flash</a></li>
  </ul>
</div>
<script type="text/javascript">
document.getElementById('menu').onclick = function(e) {
  var target = e && e.target || event.srcElement; // целевой элемент
  if (target.tagName != 'A') return; // если не ссылка - не интересует!
  var href = target.getAttribute('href');
  alert(href); // обработать клик по элементу
  return false; // отменить переход по ссылке
}
function nextPage() {
document.getElementById("content").innerHTML="новый контент";
}
</script>

Тут у нас событие было делегировано при загрузке страницы. А если мы потом запускаем nextPage(), то всё что было делегировано на menu очищается? или так и остается висеть в памяти?

должно очищаться - благодаря сборщику мусора в JS.