Bilder öffnen erst beim zweiten Aurfruf in richtiger Größe
Joerg Meier
- javascript
Hallo NG,
ich habe auf meiner Homepage eine kleine Galerie installiert und ein JS-Script aus dem Netz ein wenig abgewandelt.
Leider habe ich das Problem, dass sich die Bilder nicht in der richtigen Größe öffnen. Erst wenn man das Bild einmal geschlossen hat und es erneut öffnen möchte, öffnet es in der richtigen Größe.
Es geht immer erst beim zweiten Aufruf.
Im Einzelnen:
Bildergalerie auf Http-Site mit kleinen jpg. Beim Klick auf das Mini-jpg wird in externer JS ausgelagerte Funktion angesprochen, die ein Fenster mit dem großen JPG öffnet. Die Fenstergörße soll sich nach der Auflösung des Bildes richten, plus ein paar Zentimeter für Über- und Unterschriften.
1. Hier der Aufruf aus dem HTML (verkürzt dargestellt):
<html>
<head>
<script language="JavaScript" src="/js/bilderPopUp.js" type="text/javascript"></script>
</head>
<body>
<a href="javascript: popUpImg('fotos/Ferienwohnung/Essbereich Kueche_1.jpg','Bilder Ferienwohnung', 'Ess- und Küchenbereich', 'Zum Schließen des Fensters bitte auf das Bild klicken')"><img src="fotos/Ferienwohnung/Piktogramme/Essbereich Kueche_1.jpg" alt="Ess- und Küchenbereich ::: Zum Vergrößern bitte klicken" border="0" longdesc="fotos/Ferienwohnung/Essbereich Kueche_1.jpg"></a>
</body>
</html>
2. Hier die JS
function popUpImg(img, Titelschrift, Ueberschrift, Unterschrift) {
myImg = new Image();
myImg.src = img;
var width = myImg.width;
var height = eval(myImg.height+100);
var breite = width;
var hoehe = height;
var links,oben;
links = eval((screen.width - breite)/2);
oben = eval((screen.height - hoehe)/2);
imgWin = window.open('', 'Titelschrift', 'left=' + links + ', top=' + oben + ', width=' + width + ', height=' + height);
with (imgWin.document) {
open();
write('<HTML>');
write(' <HEAD>');
write(' <title>' + Titelschrift + ' </title>');
write(' </HEAD>');
write(' <BODY style="margin: 0px; font-family: Arial,sans-serif; text-align:center; font-size:12px; line-height:20px;" onLoad="self.focus();">');
write(' <p> ' + Ueberschrift + ' </p>');
write(' <a href="" onClick="JavaScript:self.close()">')
write(' <img src="' + img + '" alt="popUpImage" title="popUpImage" border="0"></a>');
write(' <p> ' + Unterschrift + ' </p>');
write(' </BODY>');
write('</HTML>');
close();
}
}
An was kann das liegen?
Was müsste ich korrigieren, damit das Fenster gleich beim ersten Aufruf in richtiger Größe öffnet?
Hinweis in eigener Sache :-)
JS - gerade erst begonnen, also absoluter Newbie.
Herzlichen Dank vorab
Gruss
Joerg
Hallo Joerg,
wenn deine Bilder alle die gleiche groesse haben baue einfach Groessenangaben in das img Tag. Das sollte helfen.
Hallo,
wenn deine Bilder alle die gleiche groesse haben baue einfach Groessenangaben in das img Tag. Das sollte helfen.
Das haben Sie ja eben nicht.
Jedes hat seine eigene Größe. Danach richtet sich dann die Größe des zu öffnenden Fensters.
Gruß Jörg
hi,
Leider habe ich das Problem, dass sich die Bilder nicht in der richtigen Größe öffnen. Erst wenn man das Bild einmal geschlossen hat und es erneut öffnen möchte, öffnet es in der richtigen Größe.
Es geht immer erst beim zweiten Aufruf.
Natürlich.
Beim ersten Aufruf muss der Browser das Bild erst mal vom Server laden - zu dem Zeitpunkt kann er noch nicht wissen, wie groß es ist (bzw. sein wird).
Beim zweiten Aufruf holt der Browser das Bild in Nullkommanix aus seinem Cache - er hat's schon auf Platte vorliegen, kann also auch sofort nachsehen, wie groß es ist.
Was müsste ich korrigieren, damit das Fenster gleich beim ersten Aufruf in richtiger Größe öffnet?
Du müsstest abwarten, bis das Bild fertig geladen ist, und erst dann auf seine Maße zugreifen.
Das geht, in dem du den erzeugten Bildobjekten einen onload-Handler dynamisch anhängst. Genaueres sollte das Archiv wissen.
gruß,
wahsaga
Hi,
Du müsstest abwarten, bis das Bild fertig geladen ist, und erst dann auf seine Maße zugreifen.
Das geht, in dem du den erzeugten Bildobjekten einen onload-Handler dynamisch anhängst. Genaueres sollte das Archiv wissen.
herzlichen Dank erstmal.
Ich habe jetzt auch vieles zu onload gefunden aber ich hab von js wirklich noch überhaupt keine ahnung.
deine erklärung ist logisch und verständlich.
aber wo und wie baue ich den onload ein?
Danke, Gruß Jörg