Добрый день!
Приведу пример сложности с которой столкнулся:
<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 и использовать стандартные способы навешивания функций на события?
Подскажите, в ту сторону ли я копаю, или я допустил совершенно другие ошибки? Может быть есть некий принцип написания кода, так сказать некий образец, чтобы не допускать утечек памяти ... ткните носом, что мне нужно подучить ...
Спасибо!
к сожалению, она не полностью верна - многий говнокод может работать нормально. он немного другие отличия от совершенного имеет.
