Доступный способ скрыть элемент до $ (document) .ready () jQuery? - PullRequest
Новая
       3

Доступный способ скрыть элемент до $ (document) .ready () jQuery?

5 голосов
/ 25 августа 2010

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

Беда в том, что при запуске $(document).ready() и при сжатии всего в аккордеонное меню происходит заметное мгновение. То есть до $(document).ready() вы можете увидеть весь опрос.

Я рассматривал установку #surveyForm на display: none; в css и #surveyForm.active на display: block;, но это создает новую проблему:

Браузеры без включенного JavaScript никогда не увидят # surveyForm.active и поэтому не смогут использовать опрос.

Есть идеи?

Приветствия

-Iain

Ответы [ 8 ]

2 голосов
/ 25 августа 2010

Если вы хотите легко управлять не-javascript браузерами / пользователями без snap , когда JS включен, попробуйте следующий фрагмент внутри головного узла вашей страницы: 

document.documentElement.className = 'has-js'
// or any other class name, use += and append it if you already have a class on your *html* tag

В вашем CSS напишите сначала для сценария, отличного от js, а затем установите для display значение none или скройте его любым другим подходящим способом, добавив префикс к js-релевантному css-селектору с .has-js.

.проголосовал за , поместив javascript в голову , но имейте в виду, что с точки зрения производительности (Yahoo и др.) только файлы javascript (внешние) необходимо загружать как можно позже.

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

2 голосов
/ 25 августа 2010

Он не чистый и ненавязчивый, как должен быть хороший Javascript, но вы можете просто добавить фрагмент Javascript сразу после вашего аккордеонного контента, чтобы инициализировать аккордеон и скрыть фрагменты, которые нужно скрыть. Чистый эффект должен полностью устранить «привязку» и сделать форму доступной для клиентов, не являющихся JS.

2 голосов
/ 25 августа 2010

Я не пробовал этого, но, возможно, вы могли бы заключить содержимое в теги <noscript>. Те, у кого отключен Javascript, всегда будут видеть контент. Те, у кого есть Javascript, не увидят контент. Затем используйте JQuery для удаления тегов <noscript>, что делает содержимое видимым для тех, кто использует Javascript.

EDIT:

Следующий пример почти работает. Я намеревался удалить теги <noscript>, сохранив их содержимое. Однако код в конечном итоге экранирует HTML. Идея работает, но я не уверен, как правильно ее реализовать - возможно, кто-то еще может пролить свет на это: 

<noscript>
    <p>Display me!</p>
</noscript>
<script type="text/javascript" language="javascript">
    $(document).ready(function() {
        $('noscript').contents().unwrap();
    });
</script>

Вот что я хотел получить: 

<p>Display me!</p>

Вот что я на самом деле получаю: 

&lt;p&gt;Display me!&lt;/p&gt;

РЕДАКТИРОВАТЬ 2:

После небольшого исследования метод unwrap() работает правильно для не <noscript> тегов: он работает, например, для содержимого <div>. Я не уверен, что решение здесь. Вероятно, это связано с тем, как браузеры интерпретируют <noscript>.

1 голос
/ 25 августа 2010

Это прогрессивное улучшение решение Я использую для подобных ситуаций.

1 голос
/ 25 августа 2010

Я бы придерживался решения css display:none.Чтобы исправить проблему no javascript, вы можете использовать это: 

<script type="text/javascript">
   $(document).ready(function(){
      // fade in?
   });
</script>
<noscript>
   <div>foobar!</div>
</noscript>
0 голосов
/ 25 августа 2010

Вы можете разместить встроенный оператор Javascript, который будет скрывать элемент сразу после его рендеринга.

В основном ...

  1. Скрипты внутри секции <head> загружены
  2. HTML отображается
  3. $(document).ready() пожар

Так что, чтобы это исправить, вы можете просто сделать это 

<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    $("#survey").accordion();
  }
</head>
<body>
    <div id="survey">....</div>
    <script type="text/javascript">
      $("#survey").hide();
    </script>
</body>
0 голосов
/ 25 августа 2010

Способы решения этой проблемы:

  1. Используйте javascript для загрузки файла CSS, который выполняет первоначальное скрытие.

  2. Поместите CSS в блок noscript, который устанавливает видимость в true после того, как вы везде установите его в false.

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

0 голосов
/ 25 августа 2010

Не могли бы вы попытаться спрятать все в верхней части блока jquery, а затем снова показать его после того, как выполните все уплотнения? 

$(document).ready
(
    function ()
    {
        $("#surveyForm").hide();
        ... MAGIC CONDENSING
        $("#surveyForm").show();
    }
);

Это может уменьшить влияние «щелчков», которые вы видите.

...