nicht angemeldet
Hallo,
var newImage = new Image();
newImage.onload = function () { imageIsLoaded( this ) };
newImage.src = imgPath + imgNames[i];
> -------------------------------------------------------------------
>
> Da habe ich schon ein Verständnisproblem. Wie kann in der einen Funktion ein Bild erzeugt und gecacht werden, wo erst in der nächsten Funktion der Dateipfad angegeben wird? Und kann man das nicht innerhalb einer Funktion abhandeln?
Willkommen in der Welt des Event-Handlings. Solche Sachen werden in JavaScript asynchron und ereignisbasiert gehandhabt. Wenn du src zuweist, dann fängt der Browser zwar an, die Grafik herunterzuladen, aber wie gesagt im Hintergrund. Das Script wird nicht angehalten, sondern läuft weiter. Damit das Script reagieren kann, wenn die Grafik fertig geladen ist, gibt es das load-Ereignis. Und hier wird einfach eine Ereignisüberwachung gestartet, indem man eine Handlerfunktion für das Ereignis "load" zuweist.
> var img = new Image();
> img.src = param.name;
>
> var ratio = img.height / img.width;
Wie gesagt, du kannst auf die Eigenschaften height und width erst zugreifen, wenn das Bild fertig geladen ist. Das ist es zu dem Zeitpunkt, zu dem diese Codezeile ausgeführt wird, nicht der Fall. Daher musst du ein ereignisgesteuertes Programm schreiben.
Packe den restlichen Code der Funktion in eine verschachtelte Funktion und weise die als load-Handler zu:
img.onload = openLightBox;
function openLightBox () {
... restlicher Code ...
}
Durch die Verschachtelung hat die interne Funktion Zugriff auf die Variablen param und img, daher musst du am Code nichts ändern.
> var body = document.getElementsByTagName("body");
document.body reicht aus, getElementsByTagName ist unötig.
Wenn du schon einen Shortcut nutzt, dann nutze ihn doch konsequent bei allen Vorkommnissen von document.body.
> if ((document.all) && (document.getElementById)) { // Kontrolle auf IE6
> backLayer.style.filter = "alpha(opacity=" + opacity + ")";
> } else if ((!document.all) && (document.getElementById)) { // Kontrolle auf Firefox
> backLayer.style.opacity = opacity/100;
> }
Diese Browserweiche ist so unzuverlässig, wie sie unnötig ist. Besser du schreibst eine richtige Fähigkeitenabfrage:
backLayer.style.opacity = opacity/100;
if (typeof backLayer.style.filter != "undefined") {
backLayer.style.filter = "alpha(opacity=" + opacity + ")";
}
Oder:
if (backLayer.[filters](http://msdn.microsoft.com/en-us/library/ms537452(VS.85).aspx)) { ... IE-Fix ... }
> if (resize) {
> a.onclick = function close() { // ... wenn es skaliert wurde
> body[0].removeChild(body[0].lastChild);
> body[0].removeChild(body[0].lastChild);
> document.location.href = param.name;
> }
> } else {
> a.onclick = function close() { // ... wenn es nicht skaliert wurde
> body[0].removeChild(body[0].lastChild);
> body[0].removeChild(body[0].lastChild);
> }
> }
Du brauchst die Funktion nicht zweimal notieren. Die Variable resize ist (genauso wie body) darin verfügbar und du kannst die if-Abfrage auch einfach in die Funktion schreiben.
Mathias
--
[SELFHTML aktuell Weblog](http://aktuell.de.selfhtml.org/weblog/)