отобразить HTML-страницу после завершения загрузки

Question

Есть ли способ заставить браузер отображать страницу только после полной загрузки всего содержимого страницы (например, изображений, скриптов, CSS и т. Д.)?

Answer 1

Самое простое, что нужно сделать, это поместить div со следующим CSS в тело:

#hideAll
 {
   position: fixed;
   left: 0px; 
   right: 0px; 
   top: 0px; 
   bottom: 0px; 
   background-color: white;
   z-index: 99; /* Higher than anything else in the document */

 }

(Обратите внимание, что position: fixed не будет работать в IE6 - я не знаю ни одного надежного способа сделать это в этом браузере)

Добавьте DIV следующим образом (сразу после открывающего тега body):

<div style="display: none" id="hideAll">&nbsp;</div>

показывать DIV сразу после:

 <script type="text/javascript">
   document.getElementById("hideAll").style.display = "block";
 </script> 

и скрыть это onload:

 window.onload = function() 
  { document.getElementById("hideAll").style.display = "none"; }

или используя jQuery

 $(window).load(function() {  document.getElementById("hideAll").style.display = "none"; });

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

Answer 2

наложение на страницу наложения

#loading-mask {
    background-color: white;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;
}

, а затем удалить этот элемент в обработчике window.onload или скрыть его

window.onload=function() {
    document.getElementById('loading-mask').style.display='none';
}

Конечно, если вы используете библиотеку, вы должны использовать специальный обработчик загрузки javascript (jquery, prototype ..).

Answer 3

Сначала скрыть тело, а затем показать его с помощью jQuery после его загрузки.

body {
    display: none;
}

$(function () {
    $('body').show();
}); // end ready

Кроме того, было бы лучше иметь $('body').show(); в качестве последней строки в вашем последнем и главном .jsфайл.

Answer 4

Вы также можете пойти на это .... это будет отображать раздел HTML только после загрузки JavaScript.

<!-- Adds the hidden style and removes it when javascript has loaded -->
<style type="text/css">
    .hideAll  {
        visibility:hidden;
     }
</style>

<script type="text/javascript">
    $(window).load(function () {
        $("#tabs").removeClass("hideAll");
    });
</script>

<div id="tabs" class="hideAll">
   ##Content##
</div>

Answer 5

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

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