Как скрыть контент от пользователя, пока таблица стилей не будет загружена и выполнена? - PullRequest
Новая
       21

Как скрыть контент от пользователя, пока таблица стилей не будет загружена и выполнена?

1 голос
/ 28 июня 2010

Я использую плагин jQuery для скользящих панелей контента.В течение примерно 400 мс все элементы страницы вспыхивают (текст, изображения и т. Д.) Поверх себя, создавая беспорядочный искаженный беспорядок ... недоумение, которое вы могли бы сказать.все вон.Но ради профессионализма и перфекционизма я хотел бы скрыть весь контент, пока не загрузится таблица стилей.

$ (документ). Уже неуместно, потому что бум ... это моя проблема.onload () тоже не работает, потому что весь контент скрыт, пока страница полностью не отобразится (изображения ... 4, 5, 6 секунд ... zzzzzzzz ....)

Так кто-нибудь знаетварианты есть?(А можно ли будет играть миди Girl From Ipanema во время загрузки страницы?: P)

Ответы [ 3 ]

2 голосов
/ 28 июня 2010

Вы можете сделать так, чтобы таблица стилей скрывала определенные элементы как display: none, пока они не потребуются.

Однако, если вы сделаете это непосредственно в таблице стилей, у вас возникнут проблемы с доступностью, как в браузере без JavaScript.содержание не будет отображаться вообще.Обойти это можно, установив скрытность в переменной, заданной в JavaScript, до загрузки любого из отложенных элементов, например, в виде класса на <body>: 

<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>
0 голосов
/ 28 июня 2010

Очень легко скрыть контент, который будет обрабатываться JavaScript.Вам просто нужно сгенерировать сам контент с помощью JavaScript или установить его стиль на display: none.

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

Мой совет - изменить ваш CSS, чтобы контент выглядел хорошо даже при отключенном JavaScript.

(Что касается вашего последнего требования, вы можете использовать плагин jQuery.ipanema-girl.js .)

0 голосов
/ 28 июня 2010

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

Если доступность имеет меньшее значение, вы можете скрыть всю страницу (или, по крайней мере, скучный текст)) с display: none в оболочке div или body.

...