#javascript #jquery
#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 за некоторое время до загрузки полной страницы.