JQuery.ready слишком поздно: как применить значения CSS с JQuery перед рендерингом? - PullRequest
Новая
       22

JQuery.ready слишком поздно: как применить значения CSS с JQuery перед рендерингом?

2 голосов
/ 28 апреля 2010

Я хочу иметь возможность применять непрозрачность к некоторым элементам, чтобы сделать их невидимыми , только если включен JavaScript . Я не хочу использовать display:none, потому что хочу, чтобы макет работал так, как если бы он находился в DOM, поэтому установка непрозрачности на 0 идеальна.

Я хочу иметь возможность установить это начальное значение, используя Javascript, используя JQuery, чтобы мне не приходилось связываться с различиями браузера в атрибутах opacity (и многих других). Но если я установлю непрозрачность на 0 примерно так: 

$(document).ready(function() {
  $("#header").css("opacity", 0);
  $("#header").animate({opacity:1}, 500);
});

... половину времени он уже виден на экране, поэтому он появляется и исчезает.

Как мне установить эти значения CSS, используя JQuery, прежде чем они когда-либо смогут отрендерить?

В поисках решения только для JQuery, поэтому мне не нужно вручную обрабатывать каждую реализацию браузера следующим образом: 

#header {
  -moz-opacity:.50;
  filter:alpha(opacity=50); 
  opacity:.50;
}

Ответы [ 3 ]

2 голосов
/ 28 апреля 2010

Просто установите непрозрачность на 0 в самом файле CSS. Чтобы закрыть сценарий, добавьте к своей голове следующее: 

<noscript><style>#header { opacity: 1; }</style></noscript>

Обновление : поскольку это не вариант, следующим вариантом будет выполнение сценария непосредственно после элемента #header. 

<div id="header"></div>
<script>$("#header").css("opacity", 0).animate({opacity:1}, 500);</script>
1 голос
/ 28 апреля 2010

Почему бы не использовать 

#header
{ 
    visibility: hidden;
}

, а затем в рукописи в голове 

<noscript><style type="text/css">#header { visibility: visible; }</style></noscript>
0 голосов
/ 28 апреля 2010

Проблема заключается в том, что выполнение JavaScript почти всегда происходит после начала рендеринга, если только вы не выполните взлом таблицы, который предотвращает рендеринг до полной загрузки страницы. Но тогда вы будете раздражать своих пользователей, и вас должны застрелить.

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

...