Uno dei problemi più annosi di window.onload, di cui ho parlato anche su web-graphics, è la latenza di esecuzione degli script. In alcuni casi questa latenza si può ridurre apparentemente a zero, in particolare quando dobbiamo nascondere o manipolare appena possibile elementi di pagina.
Ho pensato così di riprendere uno degli esempi della prima parte della serie su Interazione ed eventi
in Javascript per mostrare come sia possibile. Ecco quindi l'esempio aggiornato, in cui è possibile visualizzare o nascondere elementi di pagina e la transizione al caricamento è molto ridotta.
Rispetto all'esempio originale, nella nuova versione gli elementi da mostrare o nascondere oltre ad avere un id
dovranno avere classe "toggle" nell'HTML, ed è questa l'unica aggiunta che dovrete operare per adottare la nuova versione dello script che si occupa del resto. Per chi è un po' pratico di Javascript, il meccanismo è abbastanza semplice: dopo aver verificato il supporto del DOM si scrive attraverso un document.write la regola CSS necessaria per nascondere tutti gli elementi con classe toggle, per poi assegnare le funzioni da invocare al caricamento della pagina attraverso l'onload:
if(document.getElementById && document.createElement){
document.write('<style type="text/css"> *.toggle{display:none} </style>');
window.onload=function(){
/*le modifiche allo script vanno solo fatte qui*/
Attiva("commenti","mostra commenti","nascondi commenti");
Attiva("immagine","visualizza immagine","nascondi immagine");
}
}
Come nell'esempio originale la parte da modificare dello script riguarda esclusivamente le chiamate sugli elementi attivabili dall'utente, ovvero le chiamate riportate in grassetto qui sopra. I tre parametri della funzione "Attiva", che è rimasta invariata, sono nell'ordine id dell'elemento, testo per mostrarlo e per nasconderlo.
In conclusione aggiungo che ci sono molte possibili soluzioni: un approccio diverso e decisamente valido si può trovare in Using dynamic CSS to hide
content before page load. Alla prossima.