Раскрытие div с помощью jQuery show() - что происходит для тех, у кого отключен JS?

#javascript #jquery

Вопрос:

На моем веб-сайте есть модуль, который загружается довольно странно, поэтому я хочу скрыть div во время загрузки страницы, а затем показать его в document ready. Следующий (упрощенный) код работает просто отлично:

 <div class="slideshow" style="display:none;">
  This div should be hidden during load
</div>

<script type="text/javascript">
  $(document).ready(function() {
    $('.slideshow').show();
  });
</script>

Это работает так, как задумано. Но что происходит с пользователями с отключенным Javascript? Останется ли div скрытым для них? Как я могу убедиться, что все пользователи увидят виджет?

Ответ №1:

Довольно распространенный способ — добавить класс .nojs к вашему элементу <body> or <html> и удалить его с помощью Javascript, например onload. Таким образом, вы можете просто обрабатывать два разных состояния с помощью CSS:

 .slideshow {
  display: none;
}

html.nojs .slideshow {
  display: block;
}

Возможно, стоит попробовать http://www.modernizr.com / в этом контексте.

Ответ №2:

Вам следует удалить стиль display: none из div и явно скрыть его в вашей функции document.ready. Таким образом, без javascript это будет видно с самого начала.

1. Но если он также отображает этот элемент в document.ready, то он никогда не будет «скрытым», если вы одновременно скрываете и показываете его.

2. Справедливый комментарий Мэтта — но я предполагаю, что, поскольку это промежуточный div, в document.ready произойдет что-то еще, после чего div будет отображен.

3. У вас также есть это небольшое мерцание во многих системах, когда элемент виден на долю секунды, а затем исчезает.

Ответ №3:

Лично я предпочитаю использовать CSS в своих интересах для таких вещей. Я добавляю эту строку скрипта прямо в тег тела моего шаблона HTML.

 <script type="text/javascript">document.body.className = "JS";</script>

Затем, для сценария, который вы описываете, я бы использовал дополнительный CSS-класс в div, вот так.

 <div class="slideshow initially-hidden">
  This div should be hidden during load
</div>

С соответствующим стилем, учитывающим класс, добавленный через JavaScript в шаблон.

 body.JS .initially-hidden {
  display: none;
}

Ваши элементы с классом «изначально скрытые» теперь будут невидимыми, только если включен JavaScript. Если он отключен, они будут видны.

Ответ №4:

 <div class="slideshow">
  This div should be hidden during load
</div>

<script type="text/javascript">
  $('.slideshow').hide();
  $(document).ready(function() {
    $('.slideshow').show();
  });
</script>

Ответ №5:

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

Ответ №6:

Но что происходит с пользователями с отключенным Javascript? Останется ли div скрытым для них?

Поскольку код, который вы должны показать div, не может быть запущен, да, он останется скрытым.

Как я могу убедиться, что все пользователи увидят виджет?

Используйте <noscript> для отображения div как скрытого, когда Javascript не включен, или загрузите div как видимый и скройте его с помощью Javascript за некоторое время до загрузки полной страницы.