Quem não teve problemas tentando que o site não viu enquanto o conteúdo foi carregado? O mesmo aconteceu no meu último site. O design tinha muitas imagens em cada seção, com fotos impossíveis de otimizar por sua natureza, que causando um efeito pouco claro em cada mudança de página: o desenho foi intermediário até que as imagens fossem digeridas para serem baixadas. A solução? Entre muitas possibilidades, decidi criar um carregador que cobre todo o local até que estivesse preparado para desfilar pelos olhos dos meus visitantes.
pela rede que vi muitos trechos, ou códigos, o que poderia resolvê-los; Mas a grande maioria desatualizada. Por esta razão, decidi agendar um sistema moderno que eu compartilho para que qualquer um possa usá-lo.
código ou snippet
é muito importante que o HTML e o CSS do carregador sejam A primeira coisa que o usuário vê, mesmo antes do arquivo CSS com seus estilos chegarem processados. Portanto, você deve incluí-lo em bruto e também onde o corpo começa. No exemplo, eu deixo você um layout onde tudo visível é coberto, adiciona um fundo branco e, por outro lado, concentra-se uma rotação (vira-se de círculo círculo).
<body> <!-- Loading --> <style> .loading { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: white; display: flex; justify-content: center; align-items: center; z-index: 9999; transition: 1s all; opacity: 0; } .loading.show { opacity: 1; } .loading .spin { border: 3px solid hsla(185, 100%, 62%, 0.2); border-top-color: #3cefff; border-radius: 50%; width: 3em; height: 3em; animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } </style> <div class="loading show"> <div class="spin"></div> </div> <!--- Resto de tu HTML --></body>Agora o que esperar quando necessário. O código a seguir exclui o carregamento quando:
- O DOM está pronto (HTML).
- Todas as imagens foram baixadas.
- este presente o HTML Carregador (representado com a classe de carregamento).
//======================================================================// LOADING//======================================================================var Loading = (loadingDelayHidden = 0) => { //----------------------------------------------------- // Variables //----------------------------------------------------- // HTML let loading = null; // Retardo para borrar const myLoadingDelayHidden = loadingDelayHidden; // Imágenes let imgs = ; let lenImgs = 0; let counterImgsLoading = 0; //----------------------------------------------------- // Funciones //----------------------------------------------------- /** * Método que aumenta el contador de las imágenes cargadas */ function incrementCounterImgs() { counterImgsLoading += 1; // Comprueba si todas las imágenes están cargadas if (counterImgsLoading === lenImgs) hideLoading(); } /** * Ocultar HTML */ function hideLoading() { // Comprueba que exista el HTML if(loading !== null) { // Oculta el HTML de "cargando..." quitando la clase .show loading.classList.remove('show'); // Borra el HTML setTimeout(function () { loading.remove(); }, myLoadingDelayHidden); } } /** * Método que inicia la lógica */ function init() { /* Comprobar que el HTML esté cargadas */ document.addEventListener('DOMContentLoaded', function () { loading = document.querySelector('.loading'); imgs = Array.from(document.images); lenImgs = imgs.length; /* Comprobar que todas las imágenes estén cargadas */ if(imgs.length === 0) { // No hay ninguna hideLoading(); } else { // Una o más imgs.forEach(function (img) { // A cada una le añade un evento que cuando se carge la imagen llame a la funcion incrementCounterImgs img.addEventListener('load', incrementCounterImgs, false); }); } }); } return { 'init': init }}// Para usarlo se declara e inicia. El número es el tiempo transcurrido para borra el HTML una vez cargado todos los elementos, en este caso 1 segundo: 1000 milisegundos,Loading(1000).init();Preste especial atenção a esta linha.
Loading(1000).init();Indica o atraso, em milissegundos, ao excluir o carregador quando tudo é baixado. E init () será responsável por ativar a lógica.
completo e otimizado
para que você possa usá-lo diretamente, deixei o exemplo com o código JavaScript minimizado (removendo comentários e espaços para Ocupe menos).
<!-- Loading CSS --><style> .loading { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: white; display: flex; justify-content: center; align-items: center; z-index: 9999; transition: 1s all; opacity: 0; } .loading.show { opacity: 1; } .loading .spin { border: 3px solid hsla(185, 100%, 62%, 0.2); border-top-color: #3cefff; border-radius: 50%; width: 3em; height: 3em; animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } </style><!-- Loading HTML --><div class="loading show"> <div class="spin"></div></div><!-- Loading Javascript --><script>// Loadingvar Loading=(loadingDelayHidden=0)=>{let loading=null;const myLoadingDelayHidden=loadingDelayHidden;let imgs=;let lenImgs=0;let counterImgsLoading=0;function incrementCounterImgs(){counterImgsLoading+=1;if(counterImgsLoading===lenImgs){hideLoading()}}function hideLoading(){if(loading!==null){loading.classList.remove('show');setTimeout(function(){loading.remove()},myLoadingDelayHidden)}}function init(){document.addEventListener('DOMContentLoaded',function(){loading=document.querySelector('.loading');imgs=Array.from(document.images);lenImgs=imgs.length;if(imgs.length===0){hideLoading()}else{imgs.forEach(function(img){img.addEventListener('load',incrementCounterImgs,false)})}})}return{'init':init}}Loading(1000).init();</script>Versão da área de trabalho