Quen non tivo problemas intentando que o sitio non viu mentres o contido estaba cargado? O mesmo sucedeu no meu último sitio web. O deseño tivo moitas imaxes en cada sección, con fotos imposibles de optimizar pola súa natureza, o que provocou un efecto pouco claro sobre cada cambio de páxina: o deseño entrou entrecruzado ata que as imaxes dixéronse que se descargaron. A solución? Entre moitas posibilidades decidín crear un cargador que cobre todo o sitio ata que estaba preparado para desfilar a través dos ollos dos meus visitantes.
pola rede vin moitos fragmentos ou códigos, que poderían resolvelos; Pero a gran maioría desactualizada. Por este motivo, decidín programar un sistema moderno que comparto para que calquera poida usalo.
Código ou fragmento
É moi importante que o HTML eo CSS do cargador sexan O primeiro que o usuario ve, mesmo antes de que o ficheiro CSS cos seus estilos chegue procesado. Polo tanto, debes incluílo en bruto e tamén onde comeza o corpo. No exemplo, déixovos un esquema onde todo visible está cuberto, engade un fondo branco e, por outra banda, enfoca unha xira (círculo círculo).
Agora que esperar cando sexa necesario. O seguinte código elimina a carga cando:
- O DOM está listo (HTML).
- Todas as imaxes foron descargadas.
- Este presente o HTML Cargador (representado coa clase de carga).
Preste atención especial a esta liña.
Loading(1000).init();Indica o atraso, en milisegundos, ao eliminar o cargador cando se descarga todo. E Init () será o encargado de activar a lóxica.
completa e optimizada
para que poida usalo directamente me queda o exemplo co código JavaScript minimizado (eliminación de comentarios e espazos para Ocupan 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>versión de escritorio