[FRAGE] Ausgeblendete Bilder dynamisch laden (lazyload)

[lyle]

Hallo,

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

Tanja Diezmann

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');
};

 

[kkapsner]

Wenn du die großen Bilder erst laden wills, wenn sie benötigt werden, darfst du im HTML einfach keine <img>-Nodes erstellen, die auf die entsprechenden URLs zeigen.
Ich würde nur ein einziges <img> für die Darstellung der großen Bilder machen und da dann immer bei Bedarf das src-Attribut entsprechend anpassen.

 

[lyle]

Ja, daran habe ich auch gedacht.

Ich habe nur bedenken, ob das dann flüssig läuft. Die Seite lebt davon, dass man über den Teppich mit der Mouse so drüber swiped.
Es ist ja nur ein Portfolio an Design-Projekten , wo man sich schnell einen Überblick machen kann.

Ich hatte heute im Auto aber eine Idee. Ich werde versuchen das lazyload was ich schon für die sichtbaren Bilder benutze, so umzuschreiben (oder was ähnliches neu zu schreiben) das die Referenz für das dynamische laden der img src die kleinen sichtbaren Bilder sind. Also auch bei den großen ausgeblendeten Bildern. Ich löse da sowie so alles über nummerierte fortlaufende IDs. Somit weiß ich immer, wo drüber gescrollt wurde und spreche entsprechend das große DIV an.

Egal.

Wenn es funktioniert, poste ich gerne den Code dafür als Ergebnis.

Danke!