Скрыть тело документа при загрузке страницы - PullRequest
Новая
       1

Скрыть тело документа при загрузке страницы

3 голосов
/ 03 августа 2011

У меня есть javascript, который загружен в заголовок документа, который должен скрывать тело документа, пока не будет загружено все содержимое страницы. Я пробовал: 

$(document.body).hide();

Но в некоторых браузерах все еще наблюдается мерцание. Я использую последнюю библиотеку jQuery (1.6.2). Запуск события на domready скрывает тело документа, но также вызывает мерцание.

Все, что я могу контролировать - это то, что есть в javascript. Я не могу манипулировать статическими html-страницами, так как скрипт разрабатывается как плагин.

Ответы [ 3 ]

7 голосов
/ 03 августа 2011

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

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

Самый простой способ скрыть содержимое с помощью сценария - использовать document.write чтобы создать таблицу стилей, затем удалите ее, чтобы показать содержимое: 

document.write( '<style class="hideStuff" ' +
                'type="text/css">body {display:none;}<\/style>');

window.onload = function() {
  setTimeout(
    function(){
      var s, styles = document.getElementsByTagName('style');
      var i = styles.length;
      while (i--) {
        s = styles[i];
        if (s.className == 'hideStuff') {
          s.parentNode.removeChild(s);
          return;
        }
      }
    }, 1000); // debug pause
}
6 голосов
/ 03 августа 2011

Лучший способ сделать это - поместить все содержимое в контейнерный блок и иметь таблицу стилей, которая по умолчанию скрывает его. Затем вы можете показать содержимое, как только все будет загружено. Невозможно запустить Javascript до отображения содержимого страницы по умолчанию, поэтому единственный способ начать скрытно - использовать статически определенное правило CSS:

HTML: 

<body>
    <div id="container">
        all dynamic page content goes here
    </div>
</body>

CSS в таблице стилей со страницей, чтобы ее изначально не было видно: 

#container {display: none;}

И затем вы можете делать все, что захотите, с помощью javascript, и когда вы закончите создание страницы, вы сделаете это, чтобы сделать ее видимой: 

document.getElementById("container").style.display = "block";

или в jQuery: 

$("#container").show();
0 голосов
/ 29 июня 2016

Вы можете использовать CSS и JS:

В верхней части документа, под заголовком используйте CSS: 

<style type="text/css">body {visibility: hidden;}</style>

И после этого используйте JS для восстановления видимости: 

<script type="text/JavaScript">
document.write('<style type="text/css">body {visibility: visible;}</style>');
</script>

Наслаждайтесь:)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...