JQuery Javascript изменить размер джиттера - PullRequest
Новая
       1

JQuery Javascript изменить размер джиттера

0 голосов
/ 21 марта 2011

У меня есть простой JavaScript, который я использую для автоматической настройки ширины элементов на страницах и для вертикального центрирования текста на этих страницах.

Мой скрипт работает, но в IE9 и немного вВ Safari есть отчетливый момент, когда элементы не изменяются в размерах и перепрыгивают через страницу.Это всего лишь мгновенная вспышка, но она меня беспокоит, потому что я, как правило, не «достаточно хороший» человек.Вот мой собственный сценарий: 

$(document).ready(function() { 
var containerwidth = $("#main_content").css("width");
var picwidth = $(".picture").css("width");

$(".picture").parent().css("width", picwidth);
var correctwidth = parseInt(containerwidth) - parseInt(picwidth);

$(".main-text").css("width",correctwidth-25);

if( $(".margins").css("width") ) {
    $(".title").css("width", parseInt($(".width-set").css("width"))+10);
} else {
    $(".title").css("width", parseInt($(".title").parent().css("width"))-10);
}

var container_height = $(".main-text").height();
var text_height = $(".vert-align").height();
var offset = (container_height - text_height) / 2;

$(".vert-align").css("margin-top", offset);
[...] 
});

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

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

Спасибо!

Ответы [ 2 ]

2 голосов
/ 21 марта 2011

Я подозреваю, что причина в том, что вы вызываете это в $(document).ready(), который запускается после загрузки DOM (т.е. ваши элементы уже отображаются).

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

#overlay{
    position: fixed;
    width: 100%; height: 100%;
    background: #fff;
    z-index: 9001;
}

и затем скрытие наложения с помощью $("#overlay").hide() после изменения размера в вашей $(document).ready() функции.Я не проверял это, поэтому я не знаю, работает ли это.Возможно, вам также придется добавить короткий setTimeOut.

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

0 голосов
/ 21 марта 2011

@ ZDYN правильно. «Мерцание» происходит, когда страница отображается, но код jQuery не был выполнен.

Вы можете попробовать установить в css ваши элементы на «видимость: скрытые», чтобы у них были свои размеры для расчетов, а затем измените видимость на «видимые» после изменения размера.

...