Jump to content
BelleFisio

[Resolvido] Exibir conteúdo somente após o carregamento da pagina

Recommended Posts

Olá! Boa noite.

 

Pessoal,  gostaria de saber se é possível exibir o conteúdo das páginas de um site em php somente após ser carregado todos os elementos?

 

Como é um site "meio pesadinho", ao carregar a página, alguns elementos aparecem fora de lugar e gostaria que os usuários somente vissem a página quando estiver tudo carregado (na posição certa). 

 

Eu tentei alguns códigos que encontrei em pesquisas, mas não "funcionaram" (não sei se é porque estou colocando em locais errados no código, ou se falta implementar algo), pois não tenho conhecimento em programação.

 

Abaixo um  de códigos de um exemplo  que utilizei (mas não modificou nada na minha página):

<script type="text/javascript">
        // Este evendo é acionado após o carregamento da página
        jQuery(window).load(function() {
            //Após a leitura da pagina o evento fadeOut do loader é acionado, esta com delay para ser perceptivo em ambiente fora do servidor.
            jQuery("#loader").delay(2000).fadeOut("slow");
        });
</script>

 

Agradeço a atenção.

Share this post


Link to post
Share on other sites

Javascript

<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function () {
        alert('Todo conteúdo do arquivo foi carregado pelo navegador');
    });
</script>

ou jQuery

<script type="text/javascript">
    document.ready(function () {
        alert('Todo conteúdo do arquivo foi carregado pelo navegador');
    });
</script>

Coloque um desses códigos em qualquer lugar do index, só será executado quando o DOM estiver completamente carregado.

 

Dicas:

Spoiler
  • Reveja a estrutura de sua página
  • Prefira não utilizar plugins (na verdade nunca use)
  • Utilize códigos CSS e JS minimizados.
  • Cautela com imagens, principalmente se forem grandes, tenha certeza que realmente precisa disso.
  • Use a ferramenta de inspeção do navegador e veja o que mais é pesado para carregar e tente otimizar a situação, arquivos que podem ultrapassar 10ms para carregar é sinal que merecem otimizações.
  • Prefira usar framework's CSS se não tem total domínio do que está fazendo.
  • Não adicione nada seja arquivo CSS, seja arquivo JS se não vai explorar ao máximo aqueles arquivos para não precisar recriar ou incluir algo já tem no arquivo anteior.
  • Não utilize arquivo carregado externamente aos diretórios do website exemplo:
Citar

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <- O uso de arquivos externos é o que mais sobrecarrega um website. Nesse caso acesse o website faça o download do arquivo e coloque no diretório do seu website.

 

Em fim, normalmente uma aplicação fica "pesada" é porque foi mal estruturada.

Nada disso que citei como dica tem relevância se a velocidade da conexão der conta, mas são otimizações que vale a pena fazer, pois assim você criará uma aplicação veloz e prática independente de cada caso.

Por isso leve em consideração o que você acha que está pesado, pois pode ser sua conexão.

 

 

 

  • Obrigado! 1

Share this post


Link to post
Share on other sites

Olá,  fiz o teste, nos dois códigos aparecem a página carregando como antes (as páginas aparecem sem ter carregado todo o conteúdo, como expliquei anteriormente), mas o 1º. ele aparece a janelinha com o alerta de 'Todo conteúdo do arquivo foi carregado pelo navegador'    já o 2º código não aprece o alerta. Mas ambos continuam a mostrar a página carregando. 

Seria possível uma forma de não aparecer nada e após todo o carregamento da página ela aparecer toda pronta com fundo, conteúdo, imagens já em seus devidos lugares?

 

Obs.: Agora que eu vi que tinha conteúdo oculto tbm na mensagem. Muito obrigada pelas dicas eu estou revisando geral o site e vendo o que eu posso otimizar (já encontrei algumas coisas e estou melhorando a programação). Já melhorou bastante o tempo de carregamento, mas ainda demora um pouco para carregar e aparece a página carregando. 

 

Agradeço a atenção.

Share this post


Link to post
Share on other sites

Movido: PHP -> JavaScript

  • +1 1

Share this post


Link to post
Share on other sites

 Omar~, agradeço as suas dicas! Fiz vários ajustes no meu site o carregamento dele esta bem mais rápido e o 1º código que você me passou esta funcionado corretamente. Obrigada por compartilhar seu conhecimento!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By CrysMorais
      Boa tarde pessoal,
      Sou nova por aqui e também sou nova na programação, e gostaria da ajuda de alguém, se possível.
      Eu montei uma pagina que cria questionários, onde o usuário  pode criar perguntas com 4 tipos de respostas (Radio, Checkbox, Text e Number).
      Porém não sei como verificar se no questionário, foi criado pelo menos uma pergunta de cada tipo.
       
      Montei assim:
       
      <select name="tipoconsquestao" id="tipoconsquestao" style="color:#000000; font-size:9px; width:130px; ">
                   <option value="1" selected >Única escolha</option>
                   <option value="2">Múltipla escolha</option>
                   <option value="3">Texto livre</option>
                   <option value="4">Número livre</option>
      </select>
       
      Criei um bloco desses para cada tipo de pergunta:
       
      <%if (ArrayQuestions(6,i) = 1) then%>
      <td width="8%" align=center>
             <input name="<%=conta_grupo%>" data-sm-tipo="<%=ArrayQuestions(6,i)%>" data-sm-vrmaxquestao="<%=ArrayQuestions(11,i)%>" data-sm-questao-numero="<%=ArrayQuestions(2,i)%>"  data-sm- alternativa="<%=ArrayQuestions(3,i)%>" data-sm-questao="<%=conta_grupo%>" id="<%=conta_Alternativa%>" type="radio" value="<%=ArrayQuestions(3,i) %>" <%if ArrayQuestions(4,i) = 1 then response.write "checked"%>/>
      </td>
      <td width="92%" >&nbsp;&nbsp;&nbsp;<b><%=ArrayQuestions(1,i)%><b></td>
      <% end if %>
       
       
      Recebo aqui:
       
              var arrayquestoes = [];
              var arrayalternativas = [];
              var questionarioRadio = [];
              var questionarioCheck = [];
              var questionarioText = [];
              var questionarioNum = [];
       
      for (var i = 1; i <= n_grupos; i++) {
                  var countRadio = 0;
                  var countCheck = 0;
                  var countText = 0;
                  var countVrText = 0;
                  var countVariosVrText = 0;
                  var countNum = 0;
                  
                  $("[data-sm-questao='" + i + "']").each(function (index, value) {
                      var questao = $(this).attr("data-sm-questao-numero");
                      var alternativa = $(this).attr("data-sm-alternativa");
                      //alert(alternativa);
                      var vralternativa = $(this).val();
                      var tipoalternativa = $(this).attr("data-sm-tipo");
                      
                      
                      vrmaxtotalizacao = $(this).attr("data-sm-vrmaxquestao");
                      
                      
                      arrayquestoes[i - 1] = questao;
          
                      //==============================================================================================================    
                      // Verifica todos os campos tipo questão 1 (Radiobuttons) e carrega o array questionarioRadio com true ou false
                      //==============================================================================================================  
                      if (eval(tipoalternativa) == 1)
                      {
                          if (this.checked) {
                              questionarioRadio[countRadio] = true;
                              if (textoalternativas == '') {
                                  textoalternativas = questao + '|' + alternativa + '|' + 1;
                              }
                              else {
                                  textoalternativas = textoalternativas + ';'+ questao + '|' + alternativa + '|' + 1;
                              }
                          }
                          else
                          {
                              questionarioRadio[countRadio] = false;
                          }
                          countRadio = countRadio + 1;
                          //console.log(cont);
                          
                      }
       
       
          Faço a validação aqui:
       
                
       for (var k = 0; k < questionarioRadio.length; k++) {
                  if (questionarioRadio[k])
                  {
                      if (!saidafinalRadio)
                      {
                          saidafinalRadio = true;
                      }
                  }
              }
              if (questionarioRadio.length == 1)
              {
                  saidafinalRadio = true;
              }
      }
       
      if (!saidafinalRadio)
              {
                  alert('Por favor responda todas as questões de única escolha.');
                  return;
              }
       
       
      E mando para o banco de dados.
       
       
       
    • By Bruno Brandão da Silva
      Boa noite, estou aprendendo laravel no php e estou seguindo um pdf. Porém deu um erro (Non-static method Illuminate\Routing\Route::middleware() should not be called statically) na hora que eu vou compilar (php artisan serve) no cmd e não aparece na URL o LARAVEL. O erro consta na minha api na linha 6, no caso Route::middleware('auth::api')->get('/user', function (Request $request) { return $request->user(); }); se alguém puder me ajudar
    • By Pedro_adm
      Olá pessoal ! Gostaria que alguém me ajudasse, estou precisando ler 2 linhas de um arquivo de texto por cada iteração do loop, quebrar as strings  e montar um array que será codificado em json e isso servirá como um arquivo de retorno com informação sobre clientes,  porém dessas 2 linhas cada uma possui um padrão de quebra de string diferente. A primeira linha estou chamando de segmento_T e a segunda de segmento_U por que o 14° caractere dessas linhas possuem as letras T e U ,  cada duas linhas trazem informações de um só cliente . Quero que cada segmento_t tenha o seu segmento_u. Todo o arquivo de texto está sendo alternado em segmento_t e segmento_u. Exemplo do txt:
      03300000 00000000000134373970130041625 000604895 AAAAA AAAAAAAAAA EIRELI ME AAAAA AAAAAAAAA (BRASIL) S/A 204012019 000039040 03358651T01 040 2010000053000134000604895 373970130041625 AAAAA AAAAAAAAAA EIRELI ME 0000003904012019 0335860000001T 09300000130041625 000000051504320000000000515040301201900000000000735003337397 001000002750640423PATESCO GONDIM SILVA GUIMARAES 01300416250000000000000000000000000 0335865300002U 0900000001111111110000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000401201904012019000000000000000000000000000 000 A primeira linha do txt vai ficar dentro de um array chamado "Header", a segunda linha dentro de um array chamado "Lote" e o restante das linhas vão ser as informações sobre cliente.
       
      Esse é  o código que tenho até agora:
      <?php $file = file("COBST_BGM1_03_210119P_MOV.txt"); $total_linhas = count($file); $Dados = array(); for($x=0; $x<$total_linhas; $x++) { if ($x==0){ $lista = $file[$x]; $Cabecalho['Header'][] = array( 'codigo_banco' => substr($lista, 0, 3), 'lote:' => substr($lista, 3, 4), 'tipo_registro:' => substr($lista, 7, 1), 'reservado:' => substr($lista, 8, 8) ); } elseif ($x==1){ $lista = $file[$x]; $lote['Lote'][] = array( 'codigo_banco' => substr($lista, 0, 3), 'lote:'=> substr($lista, 3, 4), 'tipo_registro:'=> substr($lista, 7, 1), 'tipo_operacao:'=> substr($lista, 8, 1), 'tipo_servico:'=> substr($lista, 9, 2) ); } elseif ($x % 2){ $lista = $file[$x]; $segmento_u['Segmento_U'][] = array( 'codigo_banco' => substr($lista, 0, 3), 'lote:'=> substr($lista, 3, 4), 'tipo_registro:'=> substr($lista, 7, 1), 'n_sequencial:'=> substr($lista, 8, 5), 'codigo_segmento:'=> substr($lista, 13, 1), 'reservado_1:'=> substr($lista, 14, 1) ); } else { $Dados = $file[$x]; $segmento['Segmento_T'][] = array( 'codigo_banco' => substr($Dados, 0, 3), 'lote:'=> substr($Dados, 3, 4), 'tipo_registro:'=> substr($Dados, 7, 1), 'n_sequencial:'=> substr($Dados, 8, 5), 'codigo_segmento:'=> substr($Dados, 13, 1) ); } } $resultados = array($Cabecalho, $lote, $segmento_u, $segmento); header("Content-Type: application/json"); $json_str = json_encode($resultados, JSON_PRETTY_PRINT); echo $json_str; ?>  
    • By peterstefan
      Boa tarde, quero fazer anúncios em um projeto e quero mostrar dentro de um foreach, mais quero mostrar a cada 5 blocos e depois mostro o anuncio do google.. isso tem algum novo para que eu possa pesquisar?
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.