Schermata di Loading per WebSite X5

Pubblicato da Stiac Editorial Board in Code Nuggets · Lunedì 02 Lug 2018
Tags: Tips, Loading, WebSiteX5, Codice

Articolo Aggiornato: Come creare un Preloader animato per WebSite X5 Pro

Utilizzare un preloader all’interno del tuo sito a volte può essere una scelta di stile, utile per “mascherare” momentaneamente la fase di caricamento del tuo sito, evitando che l’utente si imbatta in un layout spaginato o parzialmente corrotto in attesa che tutte le risorse (fogli di stile, scripts, immagini, ecc.) vengano caricate e visualizzate dal browser. Ciò accade, anche piuttosto spesso, quando si ha a che fare con connessioni lente e a basse prestazioni che impiegano tempo a completare il rendering della pagina e adottare un preloader può fare al caso tuo.

Se desideri evitare che gli utenti fissino pagine bianche al caricamento del sito realizzato con WebSite X5 forse è il caso di realizzare un preloader.

Oggi sono tanti i siti come il nostro che utilizzano un preloader al caricamento delle pagine. Questo per evitare che i visitatori durante la navigazione sul sito si ritrovino pagine con sezioni scomposte o immagini lente al caricamento.

Geniale! Non trovi?

Mettiamoci all’opera, aprendo il pannello "Codice" (Step 1 > Avanzate > Statistiche, SEO e Codice) dal nostro programma WebSite X5 e inseriamo in "Dopo l'apertura del tag BODY" le seguenti righe:

Clicca la sezione per copiare il codice.

La gif proposta è di esempio e può essere sostituita con una gif a piacere, caricata direttamente dal sul proprio sito web. Per caricare la gif, basta allegare al progetto il file sempre dalla schermata Codice.

Dopo aver allegato il file gif al nostro progetto, bisogna modificare il link tra il tag del codice inserito.