Precaching immagini

[Bakaburg]

Ciao a tutti!
Avrei un paio di domande sul precaching delle immagini. Io lo uso (cm penso tutti) per caricare in memoria immagini che appariranno solo in seguito ad eventi, cosicché l'utente nn debba aspettare che si carichi in real time spezzando l'user experience.

Avrei un paio di domande a riguardo:
-Il precaching con javascript nella pagina vale anche per immagini background descritte nei fogli css associati?
-Se uso delle immagini nei tag <img> ma con stile "display: none" l'immagine viene caricata al momento della creazione del tag e quindi nn c'è bisogno del precaching o viene caricata quando il "display" cambia e quindi è meglio usare il precaching?
-Se creo del codice html dinamicamente con javascript, in cui ci sono sia background via css, sia <img>, ma il "display" del codice generato è settato su "none" fino ad un intervento dello utente, le immagini vengono create alla creazione del codice o al cambio del "display"?

questa è un esempio di codice che uo per il caching:

var previewBakgroundCache = new Image(457, 513);
previewBakgroundCache.src = "/path";

Grazie a tutti

[Nerlaleph]

Originariamente inviato da Bakaburg
-Il precaching con javascript nella pagina vale anche per immagini background descritte nei fogli css associati?

Si, se carico l'immagine image.jpg, alla quale si riferisce anche un css backgroung-image: url(image.jpg), l'immagine verrà pescata dalla cache

Originariamente inviato da Bakaburg
Se uso delle immagini nei tag <img> ma con stile "display: none" l'immagine viene caricata al momento della creazione del tag e quindi nn c'è bisogno del precaching o viene caricata quando il "display" cambia e quindi è meglio usare il precaching?

Credo che venga caricata al momento della creazione del DOM, quindi in teoria non dovresti aver bisogno del precaching. ma non sono affatto sicuro

Originariamente inviato da Bakaburg Se creo del codice html dinamicamente con javascript, in cui ci sono sia background via css, sia <img>, ma il "display" del codice generato è settato su "none" fino ad un intervento dello utente, le immagini vengono create alla creazione del codice o al cambio del "display"?

idem come sopra

[artorius]

Allora in risposta alle tue domande:

1. Quello che il precaching fa è caricare una determinata immagine nella memoria del client, quindi che poi la usi con <img> o background-image, non cambia dal suo punto di vista: il browser l'ha già in memoria e non deve riscaricarla.

2. mmm, questa è una bella domanda. Alura, io ho fatto un paio di test con FireFox e FireBugs e sembrerebbe scaricare le immagini anche se il tag img è in display: none; Purtroppo non so se vale lo stesso per IE, ma secondo me fanno così tutti

3. Allora, le immagini vengono caricate tramite l'oggetto Image di JS al momento in cui gli setti il src. dopo quell'istruzione viene lanciata una richiesta GET in asincrono alla pagina per ottenere l'immagine indicata dal path. Se invece fai l'injection di un tag img, senza usare Image, l'immagine viene caricata nel momento in cui il tag viene immesso nella pagina, ovvero quando fai appendChild sull'elemento padre.

Spero di aver risposto alle tue domande.

[Bakaburg]

Ho fatto delle prove cancellando la cache di Firefox prima di caricare la pagina; le prove sono con e senza precaching.
La pagina è questa http://www.romasantandrea.sism.org/NewsFiller/
Il codice javascript è embed per la parte relativa al problema.
Senza caching c'è un certo delay apprezzabile quando gli elementi diventano "display: block" sia per le immagini nell'html iniziale, sia per le immagini, riferite via css, nell'html generato (viene generato all'apertura della pagina non in seguito all'azione utente, che ne cambia solo la visibilità).