In questo articolo vedremo come gestire un preloader di un sito usando il puro JavaScript.
Useremo come unica dipendenza JavaScript il modulo imagesLoaded per nascondere l'elemento che funge da preloader quando tutte le immagini sono state caricate.
A livello CSS, l'unica classe aggiuntiva sarà quella che nasconde la barra di scorrimento verticale sulla pagina quando il preloader è visibile.
.overflow-hidden {
overflow: hidden;
}
Aggiungiamo tale classe all'elemento html.
<html class="overflow-hidden"></html>
Ora possiamo definire il nostro codice in modo tale che quando le immagini sono state caricate, l'opacità del preloader sia impostata a 0. Questa operazione innescherà una transizione CSS che intercetteremo con l'evento transitionend in modo tale che al termine della transizione potremo rimuovere l'elemento dal layout con la regola CSS display: none e la classe CSS dall'elemento html.
class Preloader {
constructor(element) {
this.element = element;
if(element !== null) {
this.init();
}
}
handleTransition() {
const html = document.documentElement;
this.element.addEventListener('transitionend', function() {
this.style.display = 'none';
html.classList.remove('overflow-hidden');
}, false);
}
init() {
const self = this;
const body = document.body;
self.handleTransition();
imagesLoaded(body, function(instance) {
self.element.style.opacity = 0;
});
}
}
Il listener sulla transizione va ovviamente registrato prima dell'invocazione di imagesLoaded() in modo da essere sicuri che venga eseguito quando il valore della proprietà opacity è passato da 1 a 0.