Pretty Photo e caricamento Asincrono o Lazy Load?

[BigBlack]

Ciao Ragazzi,
mi sto cimentando per la prima volta con un sito in html5 completo. Ho acquistato un tema e l'ho modificato secondo le mie esigenze. La cosa è venuta abbastanza bene, ma ho un problema sul caricamento lento delle gallerie di immagini. Il tema che ho scaricato utilizza prettyphoto, e praticamente, a prescindere dal caricamento delle immagini, il riquadro che va sopra di esse in overlay, per aprire poi la visualizzazione grande della foto, non si carica finchè tutte le foto non sono state scaricate. Nel mentre, se si clicca su di una foto, la si visualizza nel browser come jpeg, cosa abbastanza brutta e poco comoda. MI sapete consigliare come risolvere questo problema?
Meglio Lazy load o un caricamento Asincrono di pretty photo. Essendo alle prime armi, sapreste gentilmente consigliarmi come modificare il codice? Oppure linkarmi qualche guida molto chiara da cui poter prendere spunto? Ho fatto qualche tentativo con lazy load ma non credo di aver fatto bene le cose. E allo stesso modo ho fatto un tentativo con il caricamento asincrono, ma in quel caso credo proprio di non averlo inserito correttamente.
Grazie anticipatamente.
Ciao

[Nobody33]

Che dice la documentazione ufficiale al riguardo?

Nessuno può dirti come modificare il codice senza averlo visto prima.

Che peso hanno le immagini (in kb).

[BigBlack]

Questo è il link al sito dello script.
http://www.no-margin-for-errors.com/...ightbox-clone/

A me non è sembrato di trovare nulla a riguardo nella documentazione. Però come ripeto, sono alle prime armi, magari qualcosa mi è sfuggito.
Le immagini thumb che sono quelle caricate, fanno all'incirca una 20ina di kb l'una. Il problema è che in una pagina ce ne sono un bel po, ma non posso separararle perchè altrimenti non mi funzionerebbe il filtro per modello. In sostanza io ho diverse linee prodotto e quindi diverse foto dei vari modelli. C'è un filtro che riordina dinamicamente le foto, ma se lo spezzo in due pagine va a finire che non riesco ad avere tutti i modelli nella pagina, con conseguente probabilità che le successive e con esse i modelli non vengano viste. Per questo avevo pensato a lazy load.
Ma non so se sbaglio qualcosa: La sintassi per caricare una foto è questa:

	<div class="element neutro tavoli item da-thumbs" data-category="images">
	<div class="post">
	<a href="images/Galleria/Neutro/TAVOLI/file3.jpg" rel="prettyPhoto[tavoli]" title="Tavolo">
	<img src="images/Galleria/Neutro/TAVOLI/file3thumb.jpg" alt=" Neutro " />
	<div>
	<span class="image-hover-icon"></span>
	</div>
	</a>
	</div>
	<h3 class="entry-title">Tavoli <a href="gallery-single.html">[42]</a></h3>
	</div>

Lo script prende la src come thumb. Ho provato a inserire la sintassi data-original="" per lazy load e a cancellare l'src ma carica un riquadro bianco e basta.

Però secondo me se potessi far caricare quell'immagine in overlay, che mi permette di aprire prettyphoto invece di ritardare il caricamento delle foto, sarebbe anche meglio. Per questo pensavo a un caricamento asincrono. Ma non so se si può applicare. Praticamente l'immagine in sovraimpressione che fa accedere al link è questa:

<span class="image-hover-icon"></span>

Non so se mi sono spiegato meglio

[BigBlack]

niente?