Фикс дерганий DOM элементов javascript?

Question

[thehighhomie]

Вобщем когда через js выравниваю элементы, добавляешь отступы и т.д. то при загрузке, даже быстрой, все равно видно что элементы дергаются.

Например: для выравнивания по центру, блока с не фиксированной высотой, пишу css:
center {
position: absolute;
top: 50%;
left: 50%;
}

и js:
center.style.marginTop = -center.clientHeight / 2 + 'px';
center.style.marginLeft = -center.clientWidth / 2+ 'px';

Ну все работает норм, но при загрузке и переходах по меню сайта видны дергания, и они очень не приятные.
Cначала на на родном местоположении, потом прыгают на место как js загрузится. Что только не делал, скрипты вставлял в head, на window.onload вешал такие вещи, даже молился и все равно не могу решить эту проблему. Подскажите пожалуйста как подобные вещи решаются?

Comments

[Михаил Чирский]

А почему бы это не сделать на CSS, зачем JS использовать для выравнивания, не понимаю

[thehighhomie]

Михаил Чирский: господи, да это просто пример, много же всего можно допилить через js. А косяки с дерганьем не нужны.

[thehighhomie]

Михаил Чирский: да и как вы, к примеру узнаете высоту не указанную явно в стилях?

[Михаил Чирский]

thehighhomie: очень просто

left: 50%;
top: 50%;
position: absolute;
transform: translate(-50%, -50%);

мне не нужно знать высоту, все по центру будет при любых размерах

[thehighhomie]

Михаил Чирский: дело в том что мне нужно узнать как с js в этой теме работать, ведь много другого может понадобится. по-любому нужно узнать

[Михаил Чирский]

thehighhomie: если для практики JS чтобы изучить, плохой пример, т.к выравнивание делать через скрипт, это уже извращение, а по поводу дергания, склоняюсь, что вы накосячили где то в вычислениях, javsacript очень капризен, так, что ищите примеры, там точно будет все ок, это все что я могу посоветовать исходя из вашего вопроса.

[thehighhomie]

а как же кроссбраузерность? нужны ли префиксы для transform?

Answer 1

[teslor]

Можно cделать элементы изначально невидимыми (с помощью opacity или visibility) и отобразить только когда они уже будут спозиционированы.