Qui no ha tingut problemes intentant que el lloc no es veiés mentre es carregava el contingut? Això mateix va passar en la meva última web. El disseny posseïa una gran quantitat d’imatges en cada secció, amb fotos impossible d’optimitzar per la seva naturalesa, el que provoca un efecte poc elegant en cada canvi de pàgina: el disseny es barrejava fins que les imatges es dignaven a descarregar-se. ¿La solució? Entre moltes possibilitats vaig decidir crear un carregador que tapés tot el lloc fins estigués preparat per a desfilar pels ulls dels meus visitants.
A la xarxa vaig veure molts snippets, o codis, que podien solucionar; però la gran majoria desactualitzats. Per això mateix vaig decidir programar un sistema modern que comparteixo perquè qualsevol pugui usar-lo.
Codi o snippet
És molt important que l’HTML i CSS de l’Carregador sigui el primer que vegi l’usuari , fins i tot abans que l’arxiu CSS amb els teus estils arribin a processar. Per això hauràs incloure-ho en cru, ia més on comenci body. Al ejempo et deixo una maquetació on es cobreix tot el visible, afegeix un fons blanc i d’altra banda centra un spin (petit cercle que dóna voltes).
<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>Ara que esperar quan sigui necessari. El següent codi elimina el loading quan:
- El DOM aquesta llest (HTML).
- S’ha descarregat totes les imatges.
- Aquesta presenti el HTML de el carregador (representat amb la classe loading).
//======================================================================// 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();Presta especial atenció a aquesta línia.
Loading(1000).init();Indica el retard, en milisegons, a l’hora d’esborrar el carregador quan tot estigui descarregat. I init () serà l’encarregat d’activar la lògica.
complet i optimitzat
Perquè puguis usar-lo directament he deixat l’exemple amb el codi javascript minimitzat (llevant comentaris i espais perquè ocupi menys).
<!-- 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ó escriptori