Скрыть страницу, пока все не будет загружено Дополнительно - PullRequest
Новая
       5

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

32 голосов
/ 04 марта 2012

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

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

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

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

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

Это работает совершенно нормально, но портитlayout.

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

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

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

РЕДАКТИРОВАТЬ:

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

Ответы [ 6 ]

44 голосов
/ 04 марта 2012

Все, что делается с помощью jQuery, обычно будет ждать document.ready, что слишком поздно, ИМХО.

Поставьте 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();
});

Или, если по какой-то причине ваш сценарий использует еще больше времени, чем элементы 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>
28 голосов
/ 24 января 2015

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

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

CSS: 

html { visibility:hidden; }

JavaScript 

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

Страница будет пуста, и на ней будет отображаться весь контент, когда страница загружена, флэш-контент отсутствует, загрузка изображений при просмотре и т. Д.

25 голосов
/ 04 марта 2012

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

2 голосов
/ 03 августа 2018

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

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

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

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

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

1 голос
/ 16 декабря 2018

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

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

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

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

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

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

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

...