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

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

74 голосов
/ 16 сентября 2009

Я ненавижу то, как вы можете видеть загрузку веб-страниц. Я думаю, что было бы гораздо привлекательнее подождать, пока страница полностью загрузится и будет готова к отображению, включая все сценарии и изображения, а затем браузер отобразит ее. Итак, у меня есть два вопроса ...

  1. Как я могу это сделать?
  2. Я абсолютный новичок в веб-разработке, но разве это обычная практика? Если нет, то почему?

Заранее благодарим за мудрость!

Ответы [ 16 ]

29 голосов
/ 16 сентября 2009

Это очень плохая идея по всем приведенным причинам и многим другим. Тем не менее, вот как вы это делаете, используя jQuery : 

<body>
<div id="msg" style="font-size:largest;">
<!-- you can set whatever style you want on this -->
Loading, please wait...
</div>
<div id="body" style="display:none;">
<!-- everything else -->
</div>
<script type="text/javascript">
$(document).ready(function() {
    $('#body').show();
    $('#msg').hide();
});
</script>
</body>

Если у пользователя отключен JavaScript, он никогда не увидит страницу. Если страница никогда не завершает загрузку, они никогда не увидят страницу. Если загрузка страницы занимает слишком много времени, они могут предположить, что что-то пошло не так, и просто перейти в другое место вместо * пожалуйста, подождите ... * ing.

20 голосов
/ 16 сентября 2009

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

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

http://www.webdeveloper.com/forum/showthread.php?t=180958

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

10 голосов
/ 25 декабря 2009

Вот решение с использованием jQuery: 

<script type="text/javascript">
$('#container').css('opacity', 0);
$(window).load(function() {
  $('#container').css('opacity', 1);
});
</script>

Я поставил этот скрипт сразу после моего </body> тега. Просто замените "#container" селектором для элементов DOM, которые вы хотите скрыть. Я попробовал несколько вариантов этого (в том числе .hide() / .show() и .fadeOut() / .fadeIn()), и просто установка непрозрачности, похоже, имеет наименьшие побочные эффекты (мерцание, изменение высоты страницы и т. Д.). Вы также можете заменить css('opacity', 0) на fadeTo(100, 1) для более плавного перехода. (Нет, fadeIn() не будет работать, по крайней мере, не в jQuery 1.3.2.)

Теперь предостережения: я реализовал вышеупомянутое, потому что я использую TypeKit, и при обновлении страницы появляется раздражающее мерцание, а загрузка шрифтов занимает несколько сотен миллисекунд. Поэтому я не хочу, чтобы какой-либо текст появлялся на экране, пока не загрузится TypeKit. Но, очевидно, у вас большие проблемы, если вы используете приведенный выше код и что-то на вашей странице не загружается. Есть два очевидных способа, которыми это можно улучшить:

  1. Максимальный лимит времени (скажем, 1 секунда), после которого все появляется, загружена страница или нет
  2. Какой-то индикатор загрузки (скажем, что-то из http://www.ajaxload.info/)

Я не буду беспокоиться о реализации индикатора загрузки здесь, но ограничение по времени легко. Просто добавьте это в скрипт выше: 

$(document).ready(function() {
  setTimeout('$("#container").css("opacity", 1)', 1000);
});

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

10 голосов
/ 16 сентября 2009

Для этого, безусловно, есть действительное применение. Один из них - запретить людям нажимать на ссылки / вызывать события JavaScript до тех пор, пока не загрузятся все элементы страницы и JavaScript.

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

<meta http-equiv="Page-Enter" content="blendTrans(Duration=.01)" />
<meta http-equiv="Page-Exit" content="blendTrans(Duration=.01)" />

Обратите внимание на короткую продолжительность. Достаточно просто убедиться, что страница не отображается, пока не будет полностью загружена.

В FireFox и других браузерах, решение, которое я использовал, заключается в создании DIV, который имеет размер страницы и белый цвет, а затем в самом конце страницы помещается в JavaScript, который скрывает его. , Другой способ - использовать jQuery и скрыть его. Не так безболезненно, как решение IE, но оба работают хорошо.

4 голосов
/ 24 марта 2011

Сразу после вашего тега добавьте что-то вроде этого ... 

 <style> body  {opacity:0;}</style>

И для самой первой вещи в вашем добавьте что-то вроде ... 

 <script>
  window.onload = function() {setTimeout(function(){document.body.style.opacity="100";},500);};
 </script>

Насколько это хорошая практика или плохая, зависит от ваших посетителей и времени ожидания.

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

4 голосов
/ 16 сентября 2009

Также убедитесь, что сервер буферизует страницу и не немедленно (при сборке) передает ее в браузер клиента.

Поскольку вы не указали свой технологический стек:

  • PHP: посмотрите ob_start
  • ASP.NET: убедитесь, что Response.BufferOutput = True (по умолчанию)
3 голосов
/ 16 сентября 2009

Хотя это не всегда хорошая идея, вы можете решить, действительно ли вы хотите это сделать. Есть несколько способов сделать это, и я нашел простой пример здесь:

http://www.reconn.us/content/view/37/47/

Возможно, не самый лучший, но он должен помочь вам разработать собственное решение. Удачи.

3 голосов
/ 16 сентября 2009

Вы можете спрятать все, используя некоторые CSS: 

#some_div
{
  display: none;
}

, а затем в javascript назначьте функцию для document.onload для удаления этого div.

jQuery делает такие вещи очень простыми.

3 голосов
/ 16 сентября 2009

обязательно: "использовать jQuery"

Я видел страницы с черным или белым div, который покрывает все в верхней части страницы, а затем удалил его в событии document.load. Или вы можете использовать .ready в jQuery При этом это была одна из самых раздражающих веб-страниц, которые я когда-либо видел, я бы посоветовал против этого .

2 голосов
/ 14 марта 2015

в CMS с открытым исходным кодом PHP-Fusion, http://www.php -fusion.co.uk , мы делаем это в основном - 

    <?php
        ob_start();
        // Your PHP codes here            
        ?>
        YOUR HTML HERE


        <?php 
        $html_output = ob_get_contents();
        ob_end_clean();
        echo $html_output;
    ?>

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

Этот метод полностью совместим с HTML-файлами.

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

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

...