Div nimmt neue Positions-Werte erst nach darstellen an

[slide]

Hallo,
ich baue gerade eine kleine "Lightbox". Also so, dass bei klick auf ein Bild ein bis dahin verstecktes div aufgeht und darin das Bild in groß erscheint.

Das funktioniert vom Prinzip her auch ziemlich gut, nur ein Problem habe ich.

Ich lege zuerst die Größe des Divs und dessen Position fest(dies funktioniert auch):

document.getElementById("imagelayer").style.top= document.body.offsetHeight/2 - loadimg.height/2 + "px" ;
document.getElementById("imagelayer").style.left= document.body.offsetWidth/2 - loadimg.width/2 + "px" ;
document.getElementById("imagelayer").style.height= loadimg.height + "px" ;
document.getElementById("imagelayer").style.width= loadimg.width + "px" ;

Danach Zeige ich alle Divs an:

document.getElementById("imagelayer").style.display= "block";
document.getElementById("bglayer").style.display="block";

Allerdings werden die Divs erst so angezeigt, dass die obere linke ecke der divs in der mitte des browsers ist, ebenso stimmt die breite und höhe nicht.
Dann schnappen die divs auf die richtige Position. Selbst wenn ich die beiden Teile trenne und mit setTimeout eine Zeitverzögerung einbaue,
verhält es sich immernoch so.

Das Verhalten ist im Firefox und IE gleich.

[Beat]

Allerdings werden die Divs erst so angezeigt, dass die obere linke ecke der divs in der mitte des browsers ist, ebenso stimmt die breite und höhe nicht.
Dann schnappen die divs auf die richtige Position. Selbst wenn ich die beiden Teile trenne und mit setTimeout eine Zeitverzögerung einbaue,
verhält es sich immernoch so.

Was ergibt
alert(loadimg.height)
direkt bevor du es verwendest?

mfg Beat

[slide]

»» Allerdings werden die Divs erst so angezeigt, dass die obere linke ecke der divs in der mitte des browsers ist, ebenso stimmt die breite und höhe nicht.
»» Dann schnappen die divs auf die richtige Position. Selbst wenn ich die beiden Teile trenne und mit setTimeout eine Zeitverzögerung einbaue,
»» verhält es sich immernoch so.

Was ergibt
alert(loadimg.height)
direkt bevor du es verwendest?

mfg Beat

Wenn das Bild noch nie aufgerufen wurde "0". Wenn es schonmal geladen wurde, steht (meist) der richtige wert drinne.

Daraus schliesse ich, dass das Bild noch nicht geladen ist, wenn ich die höhe auslesen will.

Allerdings hole ich die daten erst in einer funktion die ich mit
loadimg.onload=showimg2(); aufrufe.

D.h. ja eigentlich, dass die Funktion eigentlich erst ausgeführt werden dürfte, sobald das bild geladen ist.

Gibt es eine andere zuverlässige Methode um das sicherzustellen, oder verwende ich den event nur falsch.

Hier mal der gesamte JS-Code:
----------------------------------------------------
var loadimg = new Image();
var img;

function showimg(imgurl)
{
loadimg.src = imgurl;
img = imgurl;

loadimg.onload=showimg2();
}

function showimg2(){

alert(loadimg.height);

document.getElementById('imagelayer').style.top= document.body.offsetHeight/2 - loadimg.height/2 + 'px' ;
document.getElementById('imagelayer').style.left= document.body.offsetWidth/2 - loadimg.width/2 + 'px' ;
document.getElementById('imagelayer').style.height= loadimg.height + 'px' ;
document.getElementById('imagelayer').style.width= loadimg.width + 'px' ;
document.getElementById('imagelayer').innerHTML= '<a href="#" onclick="hideimg()"><img style="border:none; margin:0px; padding:0px;" src="'+ img +'" alt="Bild"/></a>';

document.getElementById('imagectrllayer').style.top= document.body.offsetHeight/2 + loadimg.height/2 + 'px' ;
document.getElementById('imagectrllayer').style.left = document.body.offsetWidth/2 - loadimg.width/2 + 'px' ;
document.getElementById('imagectrllayer').style.height= '30px';
document.getElementById('imagectrllayer').style.width= loadimg.width + 'px' ;
document.getElementById('imagectrllayer').innerHTML= '<div class="center">Zum Schließen, auf das Bild klicken.</div>';

document.getElementById('imagelayer').style.display= 'block';
document.getElementById('imagectrllayer').style.display= 'block';
document.getElementById('lightlayer').style.display='block';

}

function hideimg() {
document.getElementById('imagelayer').style.display= 'none';
document.getElementById('imagectrllayer').style.display= 'none';
document.getElementById('lightlayer').style.display='none';

document.getElementById('imagelayer').innerHTML= '';
}

[Kai345]

[latex]Mae  govannen![/latex]

Allerdings hole ich die daten erst in einer funktion die ich mit
loadimg.onload=showimg2(); aufrufe.

Du mußt dem Event-Listener die Funktionsreferenz übergeben, nicht den Rückgabewert der Funktion. Soll heißen: Die Funktion darf an dieser Stelle noch nicht ausgeführt werden. Mit anderen Worten: Klammern weglassen.

Cü,

Kai

[slide]

[latex]Mae  govannen![/latex]

»» Allerdings hole ich die daten erst in einer funktion die ich mit
»» loadimg.onload=showimg2(); aufrufe.

Du mußt dem Event-Listener die Funktionsreferenz übergeben, nicht den Rückgabewert der Funktion. Soll heißen: Die Funktion darf an dieser Stelle noch nicht ausgeführt werden. Mit anderen Worten: Klammern weglassen.

Cü,

Kai

Ok, ich glaub nach einer gewissen Zeit vor dem PC wird man blind für sowas.
Danke. Jetzt funktionierts so wie gedacht.

Um eine Ladeanzeige zu realisieren könnte ich nun doch vor dem
loadimg.onload=showimg2;
einfach ein div mit einem "Lade..." Bild anzeigen. und in showimg2() dieses wieder verstecken.

Aber kann ich dann auch bei einem klick auf einen link, das laden des bildes abbrechen falls es dem benutzer zu lange dauert?