Скрыть страницу, пока все не будет загружено.

У меня есть веб-страница, которая сильно использует jQuery.

Моя цель - показать только страницу, когда все будет готово.

С этим я хочу избежать отображения раздражающего отображения страницы пользователю.

Я пробовал это до сих пор (#body_holder - обертка внутри тела):

$(function(){
    $('#body_holder').hide();
});
$(window).load(function() {
    $("#body_holder").show();
});

Это работает отлично, но испортит макет.

Проблема в том, что скрытие оболочки мешает другим функциям jQuery и используемым плагинам (например, layout-plugin).

Итак, я думаю, для этого должен быть другой трюк. Может быть, заложить изображение или div над телом до появления окна .load?

Какие подходы вы используете?

EDIT:

Решение, скорее всего, должно быть другим способом, чем display:none или hide();

ОТВЕТЫ

Ответ 1

Все, что делается с jQuery, как правило, придется ждать document.ready, что слишком поздно IMHO.

Поместите div сверху, например:

<div id="cover"></div>

установите несколько стилей:

#cover {position: fixed; height: 100%; width: 100%; top:0; left: 0; background: #000; z-index:9999;}

и скрыть его с помощью JS, когда загружаются все элементы:

$(window).on('load', function() {
   $("#cover").hide();
});

Или если по какой-то причине ваш script использует еще большее время, а затем элементы DOM для загрузки, установите интервал, чтобы проверить тип некоторой функции, которая загружает самую медленную, и удалите крышку, когда все функции определены!

$(window).on('load', function() {
    $("#cover").fadeOut(200);
});

//stackoverflow does not fire the window onload properly, substituted with fake load

function newW()
{
    $(window).load();
}
setTimeout(newW, 1000);
#cover {position: fixed; height: 100%; width: 100%; top:0; left: 0; background: #000; z-index:9999; 
    font-size: 60px; text-align: center; padding-top: 200px; color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<ul>
    <li>This</li>
    <li>is</li>
    <li>a</li>
    <li>simple</li>
    <li>test</li>
    <li>of</li>
    <li>a</li>
    <li>cover</li>
</ul>

<div id="cover">LOADING</div>

Ответ 2

Вот решение jQuery для тех, кто ищет:

Скрыть тело с помощью css, затем показать его после загрузки страницы:

CSS

html { visibility:hidden; }

JavaScript

$(document).ready(function() {
  document.getElementsByTagName("html")[0].style.visibility = "visible";
});

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

Ответ 3

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

Ответ 4

Ваш вопрос действителен, но я бы не стал прятаться или прикрывать страницу, пока что-то раскручивается.

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

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

Обычно вам нужно загружать вещи, к которым пользователю нужен самый быстрый доступ, обычно сначала над сгибом. Загрузка - это определение приоритетов, которое можно легко согласовать с Promises.

По крайней мере, просмотр страницы позволяет пользователю понять, что делать. Будь прозрачным.

Ответ 5

Начните свой HTML с:

<body style="opacity:0;">

В конце вашего сценария:

document.body.style.opacity = 1;

Ответ 6

Я искал решение без поддержки JavaScript, поэтому я нашел такое, которое работает в большинстве браузеров приемлемым образом.

Так как порядок загрузки правил CSS имеет значение;

  • Определите скрывающий класс в первом CSS файле или в заголовке.
.hidden-onpage-load{ display: none; }
  • В теле этот класс можно использовать как
<div class="hidden-onpage-load"> ... </div>
  • Переопределите его встроенным или в файле CSS после загрузки всех других файлов CSS и JS
.hidden-onpage-load{ display: block; }

Ответ 7

Самое простое решение, которое я придумала, - это обернуть тело в, как предлагалось ранее, но установить его как скрытое с самого начала, а затем использовать JQuery (или javascript), чтобы отобразить при загрузке после загрузки всех компонентов.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="bodyDiv" hidden>

Hello World!

</div>
<script>
$(document).ready(function() {

  // add JQuery widget loads here
  
  $("#bodyDiv").show(); // reveal complete page
})
</script>

Ответ 8

Если у вас есть div #bodyholder, вы можете поместить отображение: в CSS для него нет, а затем с помощью jQuery выполните:

$(document).ready(function() {
     $('#body_holder').show();
});

Я не понимаю, почему скрытие div должно мешать загрузке чего-либо, потому что все это значит, что оно скрыто. Однако, если вы используете много jQuery, убедитесь, что вы завернули его в $(document).ready, который будет полностью загружен DOM до запуска Javascript.

Еще один момент заключается в том, что HTML/CSS предназначен для прогрессивной загрузки, и если вы сделаете это правильно, вы можете получить хорошую прогрессивную загрузку контента для своих пользователей. Я лично не хочу, чтобы мои пользователи получали белый экран в течение нескольких секунд, пока все не было загружено. Переместите свой Javascript в конец страницы, чтобы он не блокировал загрузку и не получал контент на экране как можно быстрее.