Newsgroup: it.comp.lang.javascript
Titolo: caricamento asincrono immagini per velocizzare caricamento pagina web

Salve,
nel mio sito di annunci notavo che ci sono delle immagini a siti esterni che 
rallentano il caricamento del mio stesso sito web. Noto che il download 
lento di alcune immagini linkate verso siti web esterni rallentano nel 
caricarsi procurando qualche secondo di rallentamento nel caricamento del 
mio stesso sito all'interno del browser. Stavo pensando che google, ai fini 
dell'indicizzazione, mi potrebbe comunque penalizzare riscontrando il 
caricamento delle pagine più lento rispetto ad altri concorrenti quindi 
stavo pensando se esiste un modo per poter caricare queste immagini in 
maniera asincrona.
 
Qualcuno mi sa dare qualche consiglio?
 
Grazie e buon lavoro. 
 

 Qualcuno mi sa dare qualche consiglio?
 
Puoi fare una cosa del genere (con jQuery):
 
<img src="#" class="lateload" data-src="
http://www.exmaple.com/img.jpg
" />
 
<script>
 
 ... blablabla google analytics...
 
 $(function() {
  $('img.lateload').each(function() {
   this.src = $(this).data('src');
  });
 });
</script>
 
NON TESTATO. Scritto di getto. Fai un po' di esperimenti. :)
 
Bye.
 

Non mi è chiaro il codice javascript...sai indicarmi come poter cercare un 
esempio ben descritto in qualche sito web magari indicandomi con quali 
parole chiavi ricercare in google?
 
grazie saluti.
 
 
"Alessandro Pellizzari"  ha scritto nel messaggio 
news:9q43d7...@mid.individual.net...


 parole chiavi ricercare in google?
 
Non ci capisco molto, ma ti rispondo io...
 
Non e' codice javascript. Ma ti ha parlato di jquery.
 
quindi in google dovresti cercare:
jquery class lateload
 
 

ah...ma io non so nulla di jquery...non c'è un modo alternativo via php o 
javascript?
 
grazie
 
 
 
"Marco"  ha scritto nel messaggio 
news:9X7%q.136268$GZ3....@tornado.fastwebnet.it...


 o javascript?
 
Se vuoi caricarli DOPO che hai finito di caricare la pagina e Google 
Analytics, l'unica tua opzione e` di usare javascript.
 
jQuery semplifica molto il javascript che dovresti scrivere, astraendoti 
le problematiche crossbrowser.
 
Nulla ti vieta di fare la stessa cosa in javascript attaccandoti 
all'evento onload, facendo un getElementsByTagName e poi filtrando il 
risultato controllando la class di ogni elemento.
 
Siccome ho paura di scriverti codice bislacco, lo lascio fare ad altri. :)
 
Bye.
 

 caricamento del mio stesso sito all'interno del browser.
 
Queste immagini sono generate a runtime da qualche script caricato da
siti di terzi, o fanno parte del tuo codice HTML?
 
Intendo dire, hai un tag script che punta al sito tal dei tali, che puoi
si preoccupa di generarti il contenuto HTML, oppure tale contenuto HTML
č gią presente nella tua pagina, e tu punti hai tag IMG che puntano a
immagini su altri domini differenti dal tuo?

 caricamento del mio stesso sito all'interno del browser.
 
Queste immagini sono generate a runtime da qualche script caricato da
siti di terzi, o fanno parte del tuo codice HTML?
 
Intendo dire, hai un tag script che punta al sito tal dei tali, che puoi
si preoccupa di generarti il contenuto HTML, oppure tale contenuto HTML
è già presente nella tua pagina, e tu punti hai tag IMG che puntano a


 puntano a immagini su altri domini differenti dal mio...
 
So che č ovvio ma visto che sei tu che gestisci il codice, non potresti
salvarti le immagini sul tuo dominio e risolvere la latenza?
 
Nel caso tu non potessi, tramite JS puoi optare per un approccio simile
a quello che Alessandro ti ha mostrato; oppure invece di usare tag IMG
puoi usare DIV o altro, e impostare l'immagine come background-image
tramite CSS, ma devi anche impostare width e height per ciascuno, e
credo che la cosa diventi un po' over-complicated (in CSS le immagini
non vengono caricate fintanto che l'elemento non "displayed" o il
selettore applicato).