ti-enxame.com

exibir página HTML após o carregamento completo

Existe uma maneira de forçar o navegador a exibir uma página somente depois que todo o conteúdo da página estiver completamente carregado (como imagens, scripts, css, etc.)?

31
Rana

A coisa mais fácil a fazer é colocar um div com o seguinte CSS no corpo:

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

 }

(Observe que position: fixed não funcionará no IE6 - não conheço nenhuma maneira segura de fazer isso nesse navegador)

Adicione o DIV da seguinte forma (diretamente após a abertura body tag):

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

mostre o DIV diretamente após:

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

e esconda-o onload:

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

ou usando jQuery

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

essa abordagem tem a vantagem de também funcionar para clientes com o JavaScript desativado. não deveria causar cintilação ou outros efeitos colaterais, mas não tendo testado, não posso garantir totalmente para todos os navegadores existentes.

47
Pekka 웃

coloque uma sobreposição na página

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

e exclua esse elemento em um window.onload manipulador ou oculte

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

Obviamente, você deve usar o manipulador de onload específico da biblioteca javascript (jquery, prototype ..) se estiver usando uma biblioteca.

7
aularon

Oculte o corpo inicialmente e, em seguida, mostre-o com o jQuery após o carregamento.

body {
    display: none;
}

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

Além disso, seria melhor ter $('body').show(); como a última linha do seu último e principal arquivo .js.

5
BlekStena

você também pode fazer isso .... isso mostrará a seção HTML apenas depois que o javascript for carregado.

<!-- 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>
3
JGilmartin

tente usar javascript para isso! Parece que é a melhor e mais fácil maneira de fazer isso. Você terá o funcn embutido para executar um código html somente após o carregamento completo da página HTML.

ou então você pode usar a programação baseada em estado em que um evento ocorre em um estado específico do navegador.

0
Noddy Cha