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

Ответ 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. Он не должен вызывать каких-либо мерцаний или других побочных эффектов, но не проверял его, я не могу полностью гарантировать его для каждого браузера.

Ответ 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..) для конкретного обработчика onload, если вы используете библиотеку.

Ответ 3

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

body {
    display: none;
}

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

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

Ответ 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>

Ответ 5

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

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