Caching di una cartella di immagini al caricamento di una pagina ZK
Spesso capita di avere pagine ricche di immagini, siano esse immagini vere e proprie presenti all’interno della pagina o, forse anche più frequentemente, parte degli stili CSS applicati agli elementi della pagina ZUML.
Come esempio prendiamo un Link cui è applicata una classe CSS che comprenda un’immagine di background differente per l’evento Mouseover:
|
1 2 3 4 5 |
<zk> <window xmlns:h="xhtml"> ... <h:a href="..." class="mystyle"></h:a> ... |
dove:
|
1 2 3 4 5 6 7 8 |
a.mystyle:link, a.mystyle:visited, a.mystyle:active { background: url(img/mystyle-bkg.jpg) top left no-repeat; display: block } a.mystyle:hover { background: url(img/mystyle-bkg_hover.jpg) top left no-repeat; display: block } |
La percezione dell’utente può essere sgradevole se le immagini hanno un tempo di scaricamento non trascurabile.
Utilizzando Javascript è semplicissimo risolvere il problema introducendo uno script simile a questo:
|
1 2 3 4 5 6 |
images = "img/mystyle-bkg.jpg,img/mystyle-bkg_hover.jpg,...".split(",") var tempImg = [] for(var x=0;x<images.length;x++) { tempImg[x] = new Image() tempImg[x].src = preloads[x] } |
Questa soluzione ha, però, lo svantaggio di obbligarci ad elencare TUTTE le immagini da precaricare che possono essere anche molte. Inoltre, in caso di aggiunta di nuove immagini, ad esempio dovute a nuovi stili CSS, saremo costretti a metter mano al codice Javascript di tutte le pagine che necessitino del precaricamento.
Tramite un mix di java e Javascript è possibile, invece, in una pagina ZUML effettuare il precaching di tutte le immagini contenute in una (o più) cartella della nostra web application.
In caso di nuove immagini, questo codice ci permetterà, quindi, di non dover far nulla se non aggiungerle nella cartella corretta.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<zk> <zscript language="Java"><![CDATA[ import java.io.*; String images; public void getImages() { File dir = new File(Executions.getCurrent().getDesktop().getWebApp().getRealPath("/img")); images = new String(""); String[] list = dir.list(); if(list != null && list.length > 0) { //images += "'"+list[0]+"'"; images += "'"+list[0]; for(int s=1; s<list.length; s++) { images += ","+list[s]; } images += "'"; } }]]> </zscript> <script type="text/javascript"> <![CDATA[ function preloader(images) { var arr=images.split(","); var len=arr.length; for(var i=0; i<len; i++) { var value = arr[i]; heavyImage = new Image(); heavyImage.src = "img/"+value; } }]]> </script> <window xmlns:h="xhtml" onCreate=' getImages(); Clients.evalJavaScript("preloader("+images+")");'> ... |
Nell’esempio, tutte le immagini da pre-caricare sono supposte essere all’interno della cartella “img”.
Applicando questo codice, il browser scaricherà tutte le immagini al caricamento della pagina.
Ciao
Fede
