✔ Bild einblenden und zentrieren wenn es geladen ist...

D

Darian

Erfahrenes Mitglied
Hallo Leute,

ich habe da schon fast einen fertigen Code, nur leider funktioniert das noch nicht so ganz.

Irgendwie wird das interval nicht abgebrochen.

Wenn ich es so hinbekomme soll es mir recht sein, aber eine wirklich schöne Lösung ist das aber nicht. Könnte ich nicht irgendwie mit jquery und eventuell Events arbeiten.

Fein wäre es wenn .html eine callback funktion hätte, dann könnte ich einfach alles machen sobald der html Code geladen ist?

Denke da sollte es mittlerweile schönere Möglichkeiten geben. (Wenn diese url geladen, zentriere es, und mache ein FadeIn => fertig) :)

Code: 
function changePicture() {
		
		//holt den richtigen Link
		link = link.replace(/thumbs\//, "pics/");

		//erstellt den richtigen HTML Code
		html = "<img src='"+link+"'></img>";
		
		//ladet das Bild in die div Box
		$("#gallery_main").html(html);
		
		//Wird alle 0,5 sec aufgerufen, und macht einiges wenn das Bild complete=true ist
		var interval = window.setInterval("imageLoaded()", 1000);
}

function imageLoaded() {

	//das Bild scheint immer in [0] zu sein, ich nehme an dass das neueste Bild immer in 0 ist (hoffe das passt so)
	alert(document.images[0].complete);
	if(document.images[0].complete == true) {
		alert("in der schleife");
		//es ist geladen, also müssen wir das interval abbrechen => wird aber nicht abgebrochen (die alerts erscheinen immer wieder)
		window.clearInterval(interval);
		
		//Bild ist jetzt geladen, wir wollen die Höhe
		var Img = new Image();
		Img.src = link;
		var height = Img.height;
		
		//Bild in die Div Box der Höhe 340 zentrieren
		if(height < 340) {
			current_margin = (340-height)/2;
			$("#gallery_main img").css("margin-top", current_margin);
		}
		else {
			$("#gallery_main img").css("margin-top", "0");
		}
		
		//Div Box mit dem Bild einblenden
		$("#gallery_main").fadeIn("slow");
	}
}

Würde mich über Infos freuen, die Möglichkeiten die ich im Internet gefunden habe, passen irgendwie nicht dazu dass ich html Code lade, und nicht direkt ein Bild.

lg Darian

## EDIT ##

Hallo Leute,

habe es nun doch noch die passende jquery Methode gefunden.

Hat mich etwas verwirrt dass es load als Event, und load auch als Ajax Funktion gibt. Jetzt funktioniert es aber.

Falls es jemanden Hilft:

Code: 
function changePicture() {
		
		//holt den richtigen Link
		link = link.replace(/thumbs\//, "pics/");

		var Img = new Image();
		Img.src = link;
		
		$(Img).load(function () {
		
			var height = Img.height;
			
			//bild in div box geben
			html = "<img src='"+link+"'></img>";
			$("#gallery_main").html(html)
			
			//Bild in die Div Box der Höhe 340 zentrieren
			if(height < 340) {
				current_margin = (340-height)/2;
				$("#gallery_main img").css("margin-top", current_margin);
			}
			else {
				$("#gallery_main img").css("margin-top", "0");
			}
			
			//Div Box mit dem Bild einblenden
			$("#gallery_main").fadeIn("slow");
		});
}

Für Infos und Ideen bin ich natürlich weiterhin dankbar.

thx und lg
Darian

<edit>
Dennoch eine kurze Frage. Beim Firefox funktioniert es natürlich wunderbar. Beim ie habe ich jedoch das Problem, dass ich jedes Bild nur einmal ansehen kann. Beim 2ten Mal erscheint es nicht mehr.

Ist irgendwas ie spezifisches, vermutlich weil das Bild schon irgendwie im Browser geladen ist, kann ich kein Image mit der selben src erstellen, darum wird es nicht geladen, und das .load() wird auch nicht ausgeführt?

Was könnte ich da machen?
</edit>
 
Zuletzt bearbeitet:
Hi,

ohne zu testen - häng mal einen Timestamp an den Link an.
Code: 
html = "<img src='"+link+"?"+new Date().getTime()+"'></img>";

Ciao
Quaese
 
Hallo, das mit dem Timestamp habe ich irgendwie auch nicht hinbekommen, ich habe es aber wie folgt gelöst:

Code: 
function changePicture() {
		
		var loaded = false;
		
		//holt den richtigen Link
		link = link.replace(/thumbs\//, "pics/");

		var Img = new Image();
		Img.src = link;
		
		//alert(Img.height);
		
		$(Img).load(function () {
			
			loaded = true;
			
			showPicture(Img);
		});
		
		if(loaded == false && IE) {
			showPicture(Img);	
		}
}

Wenn IE ist, und das bild bereits geladen wurde (sprich, das .load wird nicht ausgelöst, wird es trotzdem geladen.

Musst das überprüfen mit IE, weil sonst würde er es bei Gecko Browser zweimal laden, und das wäre dann so komisch verrückt.

Aber ich versteh nicht warum ein Timestamp da was helfen sollte? Würde mich noch über eine Erklärung freuen.

lg und thx
Darian
 
Die Zugabe "timestamp" erstellt einen Img-Tag, der sich garantiert vom Cache unterscheidet. Ergo muss er aktualisiert werden - so sicherlich die Idee.
 
Ok, ist ja klar, habe es jetzt so gemacht wie du gesagt hast, und es funktioniert auch.

Deine Lösung ist sauberer wie die meine finde ich.

thx
Darian
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück