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?
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 ...)
$('#loading').hide();cada carregamento de página.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.
Código do carregador CSS em https://projects.lukehaas.me/css-loaders
fonte
$(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)$( "#loadingDiv" ).remove();por$( "#loadingDiv" ).hide();e adicione$( "#loadingDiv" ).show();antessetTimeout(removeLoader, 2000);. Eu removi a div para tornar a página mais leve, mas essa correção a torna reutilizável.Imagem de carregamento de página com o efeito fadeout mais simples criado em JS:
fonte
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
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
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
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
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á
resultado 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.
fonte
Adote como padrão o conteúdo
display:nonee, em seguida, tenha um manipulador de eventos que o definadisplay:blockou semelhante após o carregamento completo. Em seguida, tenha uma div definida comodisplay:block"Loading" e defina-adisplay:noneno mesmo manipulador de eventos de antes.fonte
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:
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:fonte
beforeSendesuccessa cada chamada ajax.Meu blog funcionará 100%.
fonte
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>:... ou em JavaScript simples:
fonte
$("#myElement").hide()mais fácil para os olhos?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:
CSS para o contêiner de carregamento e conteúdo (principalmente da resposta de mehyaa), bem como uma
hideclasse:HTML:
fonte
Com base na resposta @mehyaa, mas muito mais curta:
HTML (logo após
<body>):CSS:
Javascript (jQuery, já que eu já estou usando):
fonte
hide()o elemento do queremove()para que você possa reutilizá-lo.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.
CSS
fonte
para drupal no seu arquivo custom_theme.theme do tema
No arquivo html.html.twig após pular o link do conteúdo principal no corpo
no arquivo css
fonte