Se abbiamo bisogno di creare un "widget" javascript da inserire in una pagina di un sito esterno, o in generale se desideriamo essere sicuri al 100% che il caricamento di una libreria javascript non rallenti il loading della pagina (ma venga effettuato realmente DOPO il rendering completo della pagina), occorre usare delle tecniche di lazy loading. Con HTML5 è possibile specificare il tag "async" all'elemento <script>, ma non è ancora supportato da tutti i browser, e anche quando lo è ha lo spiacevole incoveniente di bloccare comunque l'esecuzione dell'evento "onload" della pagina.
Occorre quindi usare un pattern più elaborato. Dopo diverse prove il sistema che preferisco è questo:
<script type="text/javascript"> (function() { function l() { var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = 'widget.js'; document.getElementsByTagName('head')[0].appendChild(s); } if (window.attachEvent) window.attachEvent('onload', l); else window.addEventListener('load', l, false); })(); </script>
Al posto di "widget.js" occorre inserire il percorso alla libreria da inserire. Ovviamente se si tratta di un pezzo di codice che dovete dare ad altri lo potete compattare eliminando spazi e invii per farlo risultare in poche righe di copia&incolla.
Lo script così creato verrà effettivamente caricato solo al termine della pagina, senza bloccare in alcun modo la costruzione della stessa, e funziona su tutti i browser principali.
Maggiori dettagli li potete leggere nell'articolo dal quale ho preso spunto:
http://friendlybit.com/js/lazy-loading-asyncronous-javascript/
(La differenza fondamentale è quella di posizionare lo script dentro al tag <head> invece che prima di un altro <script>, così funziona anche in pagine che non caricano altre librerie js).
Aggiungi un commento