Como mostrar div de carregamento de página até que a página termine de carregar?


148

Eu tenho uma seção em nosso site que carrega muito lentamente, pois está fazendo algumas chamadas intensivas.

Alguma idéia de como posso divdizer algo semelhante a "carregar" para mostrar enquanto a página se prepara e desaparece quando tudo está pronto?

Respostas:


215

Eu precisava disso e depois de algumas pesquisas, vim com isso (é necessário o jQuery ):

Primeiro, logo após a <body>tag, adicione isto:

<div id="loading">
  <img id="loading-image" src="images/ajax-loader.gif" alt="Loading..." />
</div>

Em seguida, adicione a classe de estilo para a div e a imagem ao seu CSS:

#loading {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: fixed;
  display: block;
  opacity: 0.7;
  background-color: #fff;
  z-index: 99;
  text-align: center;
}

#loading-image {
  position: absolute;
  top: 100px;
  left: 240px;
  z-index: 100;
}

Em seguida, adicione esse javascript à sua página (de preferência no final da página, antes da </body>tag de fechamento , é claro):

<script>
  $(window).load(function() {
    $('#loading').hide();
  });
</script>

Por fim, ajuste a posição da imagem de carregamento e a background-colourdiv de carregamento com a classe de estilo.

É isso, deve funcionar muito bem. Mas é claro que você precisa ter um ajax-loader.giflugar. Brindes aqui . (Clique com o botão direito do mouse em> Salvar imagem como ...)


5
ao redirecionar para outra página, ela permanece na mesma página e exibe repentinamente a página desejada; em seguida: mostre o painel de carregamento na página anterior antes da descarga e na página de destino. window.onbeforeunload = function () {$ ('# loading'). show (); }
Sameh Deabes 13/11

2
+1 Isso é curto, doce e claro, eu adoro isso. No entanto, vou remover essa div e deixar apenas o <img> (;
Francisco Presencia

3
que está a tomar uma imagem, enquanto a carga de carregamento, em seguida, até página está já carregado
Elyor

1
Veja minha resposta para evitar adicionar $('#loading').hide();cada carregamento de página.
precisa saber é o seguinte

Este código Ajax vai trabalhar de forma eficaz e rápida: smallenvelop.com/display-loading-icon-page-loads-completely
JWC Maio

36

Este script adicionará uma div que cubra a janela inteira conforme a página é carregada. Ele mostrará um girador de carregamento somente CSS automaticamente. Ele aguardará até que a janela (não o documento) termine de carregar e espere alguns segundos extras opcionais.

  • Funciona com o jQuery 3 (possui um novo evento de carregamento de janela)
  • Nenhuma imagem é necessária, mas é fácil adicionar uma
  • Altere o atraso para obter mais marcas ou instruções
  • Somente dependência é jQuery.

Código do carregador CSS em https://projects.lukehaas.me/css-loaders

    
$('body').append('<div style="" id="loadingDiv"><div class="loader">Loading...</div></div>');
$(window).on('load', function(){
  setTimeout(removeLoader, 2000); //wait for page load PLUS two seconds.
});
function removeLoader(){
    $( "#loadingDiv" ).fadeOut(500, function() {
      // fadeOut complete. Remove the loading div
      $( "#loadingDiv" ).remove(); //makes page more lightweight 
  });  
}
        .loader,
        .loader:after {
            border-radius: 50%;
            width: 10em;
            height: 10em;
        }
        .loader {            
            margin: 60px auto;
            font-size: 10px;
            position: relative;
            text-indent: -9999em;
            border-top: 1.1em solid rgba(255, 255, 255, 0.2);
            border-right: 1.1em solid rgba(255, 255, 255, 0.2);
            border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
            border-left: 1.1em solid #ffffff;
            -webkit-transform: translateZ(0);
            -ms-transform: translateZ(0);
            transform: translateZ(0);
            -webkit-animation: load8 1.1s infinite linear;
            animation: load8 1.1s infinite linear;
        }
        @-webkit-keyframes load8 {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }
        @keyframes load8 {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }
        #loadingDiv {
            position:absolute;;
            top:0;
            left:0;
            width:100%;
            height:100%;
            background-color:#000;
        }
This script will add a div that covers the entire window as the page loads. It will show a CSS-only loading spinner automatically. It will wait until the window (not the document) finishes loading.

  <ul>
    <li>Works with jQuery 3, which has a new window load event</li>
    <li>No image needed but it's easy to add one</li>
    <li>Change the delay for branding or instructions</li>
    <li>Only dependency is jQuery.</li>
  </ul>

Place the script below at the bottom of the body.

CSS loader code from https://projects.lukehaas.me/css-loaders

<!-- Place the script below at the bottom of the body -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


Como adicionar isso para tags imag?
Mano M

1
O @ManoM é $(window).on("load", handler)acionado quando todos os objetos DOM terminam de carregar, incluindo imagens, scripts e até iframes. Se você deseja esperar o carregamento de uma imagem específica, use$('#imageId').on("load", handler)
Victor Stoddard

Isso só funciona quando a página é carregada pela primeira vez, ou seja, quando o navegador / guia é aberto ou atualizado. No entanto, ele não aparece quando a página é carregada após ter sido aberta. Eu tenho uma página com alternâncias que mostram diferentes conteúdos e, ao alternar entre os conteúdos, leva um tempo para carregar. Existe uma maneira pela qual eu poderia adaptar esse mesmo código para carregar, não apenas na primeira vez que a página é aberta, mas toda vez que leva um tempo para carregar?
`` #

1
@ Joehe substitua $( "#loadingDiv" ).remove();por $( "#loadingDiv" ).hide();e adicione $( "#loadingDiv" ).show();antes setTimeout(removeLoader, 2000);. Eu removi a div para tornar a página mais leve, mas essa correção a torna reutilizável.
Victor Stoddard

Eu tentei o seu código .. É estranho. Quando ligo para minha página, ela mostra uma página em branco (está carregando conteúdo). Depois de alguns segundos (acho que o conteúdo está carregado), ele mostra o carregador por 2 segundos, e mostra a página inteira. Você pode dar uma olhada: criferrara.it/crigest/toshiba
sunlight76

28

window.onload = function(){ document.getElementById("loading").style.display = "none" }
#loading {width: 100%;height: 100%;top: 0px;left: 0px;position: fixed;display: block; z-index: 99}

#loading-image {position: absolute;top: 40%;left: 45%;z-index: 100} 
<div id="loading">
<img id="loading-image" src="img/loading.gif" alt="Loading..." />
</div>  

Imagem de carregamento de página com o efeito fadeout mais simples criado em JS:


9

Eu tenho outra solução abaixo simples para isso que funcionou perfeitamente para mim.

Primeiro, crie um CSS com o nome Lockon class, que é uma sobreposição transparente junto com o carregamento do GIF, como mostrado abaixo

.LockOn {
    display: block;
    visibility: visible;
    position: absolute;
    z-index: 999;
    top: 0px;
    left: 0px;
    width: 105%;
    height: 105%;
    background-color:white;
    vertical-align:bottom;
    padding-top: 20%; 
    filter: alpha(opacity=75); 
    opacity: 0.75; 
    font-size:large;
    color:blue;
    font-style:italic;
    font-weight:400;
    background-image: url("../Common/loadingGIF.gif");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
}

Agora precisamos criar nossa div com essa classe, que cubra a página inteira como uma sobreposição sempre que a página estiver sendo carregada

<div id="coverScreen"  class="LockOn">
</div>

Agora, precisamos ocultar essa tela de capa sempre que a página estiver pronta e para que possamos impedir o usuário de clicar / disparar qualquer evento até que a página esteja pronta

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

A solução acima ficará boa sempre que a página estiver carregando.

Agora, a pergunta é depois que a página é carregada, sempre que clicar em um botão ou evento que levará muito tempo, precisamos mostrar isso no evento de clique do cliente, como mostrado abaixo

$("#ucNoteGrid_grdViewNotes_ctl01_btnPrint").click(function () {
$("#coverScreen").show();
});

Isso significa que, quando clicarmos neste botão de impressão (que levará muito tempo para fornecer o relatório), ele mostrará nossa tela de capa com GIF, o que dará istoresultado e, quando a página estiver pronta acima, a função windows on load será acionada e ocultará a tela de capa quando a tela estiver totalmente carregada.


1
Ótimo! só tinha que usá-los para torná-lo em tela cheia: fixo; largura: 100vw; altura: 100vh;
boateng

6

Adote como padrão o conteúdo display:nonee, em seguida, tenha um manipulador de eventos que o defina display:blockou semelhante após o carregamento completo. Em seguida, tenha uma div definida como display:block"Loading" e defina-a display:noneno mesmo manipulador de eventos de antes.


1
que evento você usaria para fazer isso? Carregamento de página Javascript? ou existe um lugar melhor?
Miles

Depende se você tiver outras JS executando as coisas de configuração da página - se for o caso, chame-o depois que elas estiverem concluídas, caso contrário, o carregamento do documento funcionará bem.
5409 Amber

2

Bem, isso depende muito de como você está carregando os elementos necessários na 'chamada intensiva', meu pensamento inicial é que você está fazendo essas cargas via ajax. Se for esse o caso, você pode usar a opção 'beforeSend' e fazer uma chamada ajax assim:

$.ajax({
  type: 'GET',
  url: "some.php",
  data: "name=John&location=Boston",

  beforeSend: function(xhr){           <---- use this option here
     $('.select_element_you_want_to_load_into').html('Loading...');
  },

  success: function(msg){
     $('.select_element_you_want_to_load_into').html(msg);
  }
});

EDIT Vejo, nesse caso, usar uma das 'display:block'/'display:none'opções acima em conjunto com o $(document).ready(...)jQuery provavelmente é o caminho a percorrer. A $(document).ready()função espera que toda a estrutura do documento seja carregada antes da execução ( mas não espera que toda a mídia seja carregada ). Você faria algo assim:

$(document).ready( function() {
  $('table#with_slow_data').show();
  $('div#loading image or text').hide();
});

infelizmente não é através do ajax, ele está aguardando o script php preparar os dados do banco de dados, para que alguns elementos html sejam carregados e o navegador aguarde a tabela de dados antes de carregar o resto. O que poderia parecer como se a página tiver parado, por isso precisa de algo exibido lá para mostrar que "algo está acontecendo" e não causa o usuário a se afastar ...
Shadi Almosri

FYI: O princípio da web (sem ajax) é que um servidor renderiza uma página inteira no servidor e, após a conclusão, envia esse resultado (html) ao navegador. Se a renderização da página for interrompida em algum lugar no meio (enquanto você pode ver a página aparecendo no navegador), não poderá ser um script php, porque o php roda apenas no servidor.
Peter

Veja minha resposta para evitar adicionar beforeSende successa cada chamada ajax.
precisa saber é o seguinte

2

Meu blog funcionará 100%.

function showLoader()
{
    $(".loader").fadeIn("slow");
}
function hideLoader()
{
    $(".loader").fadeOut("slow");
}
.loader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url('pageLoader2.gif') 50% 50% no-repeat rgb(249,249,249);
    opacity: .8;
}
<div class="loader">


1

Crie um <div>elemento que contenha sua mensagem de carregamento, forneça <div>um ID e, quando o conteúdo terminar de carregar, oculte <div>:

$("#myElement").css("display", "none");

... ou em JavaScript simples:

document.getElementById("myElement").style.display = "none";

Simples e faz o trabalho. De uma perspectiva de legibilidade, não é $("#myElement").hide()mais fácil para os olhos?
User3613932

1

Aqui está o jQuery que acabei usando, que monitora todo o início / parada do ajax, para que você não precise adicioná-lo a cada chamada do ajax:

$(document).ajaxStart(function(){
    $("#loading").removeClass('hide');
}).ajaxStop(function(){
    $("#loading").addClass('hide');
});

CSS para o contêiner de carregamento e conteúdo (principalmente da resposta de mehyaa), bem como uma hideclasse:

#loading {
   width: 100%;
   height: 100%;
   top: 0px;
   left: 0px;
   position: fixed;
   display: block;
   opacity: 0.7;
   background-color: #fff;
   z-index: 99;
   text-align: center;
}

#loading-content {
  position: absolute;
  top: 50%;
  left: 50%;
  text-align: center;
  z-index: 100;
}

.hide{
  display: none;
}

HTML:

<div id="loading" class="hide">
  <div id="loading-content">
    Loading...
  </div>
</div>

O problema é que, se eu tiver um preenchimento automático carregado com ajax em uma entrada, o carregador aparecerá.
9267 Lucas

0

Com base na resposta @mehyaa, mas muito mais curta:

HTML (logo após <body>):

<img id = "loading" src = "loading.gif" alt = "Loading indicator">

CSS:

#loading {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 32px;
  /* 1/2 of the height and width of the actual gif */
  margin: -16px 0 0 -16px;
  z-index: 100;
  }

Javascript (jQuery, já que eu já estou usando):

$(window).load(function() {
  $('#loading').remove();
  });

1
É melhor para hide()o elemento do que remove()para que você possa reutilizá-lo.
precisa saber é o seguinte

0

Isso estará sincronizado com uma chamada da API. Quando a chamada da API é acionada, o carregador é mostrado. Quando a chamada da API é bem-sucedida, o carregador é removido. Isso pode ser usado para carregar a página ou durante uma chamada da API.

  $.ajax({
    type: 'GET',
    url: url,
    async: true,
    dataType: 'json',
    beforeSend: function (xhr) {
      $( "<div class='loader' id='searching-loader'></div>").appendTo("#table-playlist-section");
      $("html, body").animate( { scrollTop: $(document).height() }, 100);
    },
    success: function (jsonOptions) {
      $('#searching-loader').remove();
      .
      .
    }
  });

CSS

.loader {
  border: 2px solid #f3f3f3;
  border-radius: 50%;
  border-top: 2px solid #3498db;
  width: 30px;
  height: 30px;
  margin: auto;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
  margin-top: 35px;
  margin-bottom: -35px;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

0

para drupal no seu arquivo custom_theme.theme do tema

function custom_theme_preprocess_html(&$variables) {
$variables['preloader'] = 1;
}

No arquivo html.html.twig após pular o link do conteúdo principal no corpo

{% if preloader %} 
  <div id="test-preloader" >
    <div id="preloader-inner" class="cssload-container">
      <div class="wait-text">{{ 'Please wait...'|t }} </div> 
      <div class="cssload-item cssload-moon"></div>
    </div>
  </div>
{% endif %}  

no arquivo css

#test-preloader {
position: fixed;
background: white;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 9999;
}
.cssload-container .wait-text {
text-align: center;
padding-bottom: 15px;
color: #000;
}

.cssload-container .cssload-item {
 margin: auto;
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 width: 131px;
 height: 131px;
 background-color: #fff;
 box-sizing: border-box;
 -o-box-sizing: border-box;
 -ms-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-shadow: 0 0 21px 3px rgba(130, 130, 130, 0.26);
 -o-box-shadow: 0 0 21px 3px rgba(130, 130, 130, 0.26);
 -ms-box-shadow: 0 0 21px 3px rgba(130, 130, 130, 0.26);
 -webkit-box-shadow: 0 0 21px 3px rgba(130, 130, 130, 0.26);
 -moz-box-shadow: 0 0 21px 3px rgba(130, 130, 130, 0.26);
 }

.cssload-container .cssload-moon {
border-bottom: 26px solid #008AFA;
border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
animation: spin 1.45s ease infinite;
-o-animation: spin 1.45s ease infinite;
-ms-animation: spin 1.45s ease infinite;
-webkit-animation: spin 1.45s ease infinite;
-moz-animation: spin 1.45s ease infinite;
 }
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.