Pubblicato il 13/01/11 - aggiornato il  | 3 commenti :

Mostrare una immagine che indica lo stato di caricamento di una pagina del blog.

Ci sono blog che impiegano molto tempo a caricarsi perché sono pieni di immagini pesanti e di widget. In questo caso può essere carino inserire una immagine che mostra al navigatore lo stato di caricamento della pagina che è stata aperta. In rete ci sono almeno un paio di siti che offrono gratuitamente delle immagini a questo scopo.

Ajaxload.info consente di selezionare l'immagine animata che più ci piace da un menù verticale

ajaxload per barre di scorrimento

Si possono selezionare anche il colore di sfondo e quello in primo piano (background e foreground). Si clicca su Generate It per creare l'immagine personalizzata quindi su Download It per scaricarla.

Loadinfo.net funziona con lo stesso meccanismo ma dà immagini più particolari e suggestive. Se ne può configurare anche la dimensione

loadinfo generatore icone caricamento

Si possono scegliere anche i colori di sfondo e in primo piano. Si clicca su Generate per creare l'icona, quindi su si scarica con il destro del mouse come una qualsiasi immagine.

Dopo esserci procurati  l'immagine che vogliamo visualizzare nella parte alta del blog quando si sta caricando e averla caricata su un hosting tipo Picasa, SkyDrive o ImageShack, passiamo ai passaggi successivi. Andiamo su Design > Modifica HTML e cerchiamo la riga </head>. Immediatamente sopra incolliamo questo codice

<!--Caricamento Blog Inizio-->
<script type='text/javascript'>
window.onload = ideepercomputer;
function ideepercomputer() {
document.getElementById(&quot;ideepercomputer&quot;).style.display=&quot;none&quot;;
}
</script>
<!--Fine Caricamento blog - www.ideepercomputeredinternet.com-->

quindi cerchiamo la riga <body>, se abbiamo un modello vecchio o scaricato da internet, mentre cerchiamo la riga

<body expr:class=  …

se abbiamo un modello creato con il Designer Modelli. In ogni caso la riga sarà appena sotto a quella </head> già individuata. Incolliamo questo nuovo codice

<!--Immagine di caricamento-->
<div id='ideepercomputer' style='background:#ffffff;padding:4px;margin-top:10px;margin-bottom:10px;font-family:Arial,helvetica,Trebuchet MS,sans-serif;font-size:14px;text-align:center;'>La pagina si sta caricando...<br/>
<img src='http://lh4.ggpht.com/_nT13UtBmmiU/TS7BZFaxvwI/AAAAAAAARSI/QngvakbXc2Q/ajax-loader%20%281%29.gif'/></div>
<!--Immagine di caricamento - www.ideepercomputeredinternet.com-->

dove i dati in rosso possono essere personalizzati. Sono importanti soprattutto il colore di background, che deve essere uguale a quello del blog, e l'URL della immagine animata che avete scaricato da uno dei servizi illustrati in precedenza. Si può anche cambiare la frase che viene visualizzata

barra di caricamento per blogger

Fino a quando la pagina non si sarà completamente caricata, sarà visibile l'icona animata che indica lo stato del download. Per osservare questo effetto dal vivo andate in questa pagina di demo.




3 commenti :

  1. ciao ernesto. Allora io di sfondo ho un immagine, non una tinta unita, quindi volevo sapere se è possibile impostare il secondo codice in modo che non ci sia un colore di sfondo, ma sia trasparente.

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy