Chi non ha avuto problemi a provare che il sito non ha visto mentre il contenuto è stato caricato? Lo stesso è successo sul mio ultimo sito web. Il design aveva molte immagini in ogni sezione, con le foto impossibili da ottimizzare dalla sua natura, che causando un effetto poco chiaro su ciascun cambio della pagina: il design è stato mescolato fino a quando le immagini sono state digerite per essere scaricate. La soluzione? Tra molte possibilità ho deciso di creare un caricatore che copre l’intero sito fino a quando non è stato pronto a sfiorare gli occhi dei miei visitatori.
Dalla rete ho visto molti frammenti o codici, che potrebbero risolverli; Ma la vasta maggioranza obsoleta. Per questo motivo ho deciso di programmare un sistema moderno che condivido in modo che chiunque possa usarlo.
codice o snippet
È molto importante che sia molto importante che l’HTML La prima cosa che l’utente vede, anche prima che il file CSS con i tuoi stili arrivi elaborati. Pertanto, è necessario includerlo in greggio, e anche dove inizia il corpo. Nell’esempio ti lascio un layout dove tutto visibile è coperto, aggiunge uno sfondo bianco e d’altra parte si concentra una rotazione (cerchio cerchio giri).
Ora cosa aspettarsi quando necessario. Il seguente codice elimina il caricamento quando:
- il DOM è pronto (HTML).
- Tutte le immagini sono state scaricate.
- Attualmente presente l’HTML Caricabatterie (rappresentato con la classe di caricamento).
//======================================================================// 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();IV ID = “3FD8F36B61″ ”
Presta particolare attenzione a questa linea.
Loading(1000).init();Indica il ritardo, in millisecondi, quando si cancella il caricabatterie quando tutto viene scaricato. E init () sarà responsabile per l’attivazione della logica.
Completo e ottimizzato
Quindi è possibile utilizzarlo direttamente ho lasciato l’esempio con il codice JavaScript ridotto a meno (rimozione di commenti e spazi per Occupy meno).
<!-- 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>Versione desktop