Как каждый скрывает содержание от пользователя, пока таблица стилей не загружается и выполняется?
Я использую плагин jQuery для скольжения областей содержания. Приблизительно для 400 мс все элементы страницы вспыхивают (текст, изображения, и т.д.) сверху себя делающий для грязного искаженного беспорядка... сенсация, которую Вы могли сказать.
Затем таблица стилей приходит и улаживает все это. Но ради профессионализма и перфекционизма я хотел бы скрыть все содержание, пока таблица стилей не загрузилась.
$ (документ) .ready является несоответствующим, потому что бум... это - моя проблема. onload () не работает также, потому что затем все содержание скрыто, пока страница полностью не представляет (изображения... 4, 5, 6 секунд... zzzzzzzz....)
Кто-либо знает, каковы опции? (И было бы возможно играть Девочку От midi Ипанемы во время загрузки страницы?:p)
3 ответа
Вы можете сделать так, чтобы таблица стилей скрывала определенные элементы как display: none , пока они не понадобятся.
Однако, если вы сделаете это прямо в таблице стилей, у вас возникнут проблемы с доступностью, так как в браузере без JavaScript контент вообще не появится. Один из способов обойти это - указать скрытость для переменной, которая устанавливается из JavaScript перед загрузкой любого из откладываемых элементов, например, как класс на :
<head>
<style type="text/css">
body.withjs .deferred { display: none; }
</style>
</head>
<body>
<script type="text/javascript">
$('body').addClass('withjs');
$(document).ready(function() {
// set up slideyness
});
</script>
<p>Content that loads normally...</p>
<div id="slideything" class="deferred">
content
</div>
</body>
Очень легко скрыть контент, который будет обрабатывать JavaScript. Вам просто нужно сгенерировать сам контент с помощью JavaScript или установить его стиль на display: none .
Проблема в доступности. Обычно вы хотите, чтобы контент был доступен для инструментов, которые не поддерживают все расширенные функции, включая старые браузеры, поисковые системы, мобильные телефоны, программы чтения с экрана ... Это то, что мешает вам сделать то, что я упомянул в первом абзаце.
Мой совет - изменить ваш CSS, чтобы контент выглядел хорошо даже с отключенным JavaScript.
(Что касается вашего последнего требования, вы можете использовать плагин jQuery.ipanema-girl.js .)
С точки зрения доступности, вы не должны предполагать, что ваши таблицы стилей действительно используются клиентом.Ваш контент должен быть доступен без таблицы стилей, а таблица стилей должна только улучшать представление - это Progressive Enhancement .
Если доступность имеет меньшее значение, вы можете скрыть всю страницу (или, по крайней мере, грохот) с помощью display: none в div или теле оболочки.