Optimierung: Hilfe beim dynamisches Laden der Hintergrundbilder

[Lydia Inayat]

Hallo,

vorab ich bin ein Neuling und habe mir alles via Tutorials und Bücher beigebracht. Derzeit setze ich gerade eine Seite um:

zur Seite:

Wie man sieht, handelt es sich um ein langen Bilder-Tepich, wo bei RollOver große Bilder eingeblendet werden. Dadurch entsteht ganz schönes Datenvolumen, was ich gerne für den Anwender minimieren möchte. Ich habe deswegen ein LazyloadScript eingebunden ("unveil", wenn jmd das was sagt), was zuerst nur die Bilder im sichtbaren Bereich läd und beim runterscrollen, dann auch die übrigen. Das funktioniert bei den kleinen Bildern im Vordergrund ganz gut. Nur leider die ausgeblendeten Bilder im Hintergrund leider nicht (was ja eine viel größere Datenmenge ausmacht). Denn da liegen (wenn auch ausgeblendet) alle im sichtbaren Bereich (Position 0, da position: relativ und display:hidden). Ich habe es mit Opacity versucht, aber da kommt irgendwie nur Chaos raus.

Kann mir jmd. da einen Tipp oder Lösungsanatz geben, wie ich das mit dem smarten Laden auch da hinbekomme?

Ich weiß nicht ob die Scripte hilfreich sind, oder ob man mit dem Developertools von Firefox mehr Infos raus zieht. Sagt einfach, was ihr wissen müsst.

Ein Ausschnitt aus dem Script.

function fadePC () {

IDs ();

var smallPosTop = $smallID.position().top;
var smallPosleft;
var id = parseInt($id);


// letztes Bild wird position rüber gerückt
if((id+1) % imgCountRo==0){
	smallPosleft = $smallID.position().left - imgSize - spaceSize;
	}else{
	smallPosleft = $smallID.position().left;
	} 
	
// positionieren des großen Bildes (fade)
$bigID.addClass('show').css({
			"top":smallPosTop,
			"left":smallPosleft		
		}).fadeIn('fast');

};