2

As páginas de um projeto que tenho estão tendo um comportamento estranho, ao serem chamadas um trecho da página está sendo carregado, aparentemente, atrasado, o código é esse:

  <div class="page-banner no-subtitle">
<div class="container">
  <div class="row">
    <div class="col-md-6">
      <h2>PRODUTOS</h2>
    </div>
    <div class="col-md-6">
      <ul class="breadcrumbs">
        <li><a href="index.php">Início</a></li>
        <li>Produtos</li>
      </ul>
    </div>
  </div>
</div>

Bem no início da página tenho isso:

<div class="hidden-header"></div>

E a ele está associado um .js, que é esse:

var headerEle = function(){
    var $headerHeight = $('header').height();
    $('.hidden-header').css({ 'height' : $headerHeight  + "px" });
};

$(window).load(function () {
  headerEle();
});

$(window).resize(function () {
   headerEle();
});

A página fica com um atraso no carregamento, tentei algumas opções e nada surtiram efeito, se retiro ou comento o código .js o page-banner some.

Um exemplo do comportamento pode ser visto aqui

2 Respostas 2

2

Eu dei uma olhada no seu código:

  • Coloque todo o JavaScript no fim da página, antes da fechamento das tags de </body>. Fazendo desse jeito implica que o JavaSccript tem que esperar o DOM carregar completamente para poder, aí sim, executar.
  • Eu vi que você tem uma <div></div> de pre carregamento da página, aquela que fica rodando um loader. Utilize-a da seguinte forma a seu favor:

$(window).on('load', function () {
    $("#loader").hide("slow");
});

Fazendo isso, você obriga a <div></div> loader ficar rodando na tela até o documento todo ser carregado.

3
  • Olá @Eduardo Almeida, obrigado pela dica, fiz o recomendado e o problema ainda persiste. 2/12/2015 às 18:52
  • Corrija-me se estiver errado, mas algumas partes da página são chamadas por meio de PHP com require, require_once, include ou include_once, certo? 2/12/2015 às 19:30
  • Olá @Eduardo Almeida, o conteúdo .php é chamado por require_once. 2/12/2015 às 19:35
1

A solução do loader é boa, mas dúvido que um JS tão pequeno vá atrasar o carregamento da página.

O ideal é você descobrir primeiro o que está atrasando o carregamento da página, antes de decidir o que fazer para resolver isso.

Usando o Chrome (ou o Firefox) pressione < ctrl >+< shift >+< i >. Clique na opção "Network" (ou Rede, dependendo da linguagem) e recarrege a sua página.

Você vai poder ver graficamente o que está segurando esse carregamento. Uma vez sabendo isso será mais fácil dar algum sugestão do que pode ser feito para melhorar a performance.

1
  • Obrigado pela excelente dica @Rhubenni Telesco, vou começar a fazer isso agora mesmo, mais uma vez agradeço. 2/12/2015 às 20:49

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .