JS/DOM - Bild vorladen innerhalb einer Funktion

[ezzemm]

Hallo zusammen!

Ich habe vor kurzen angefangen Javascript zu lernen und habe u.a. auch durch Suche hier im Board schon viele Probleme lösen können. Doch aktuell komme ich nicht weiter und ich hoffe ihr könnt mir helfen.

Ich habe ein kleines Lightbox-Skript geschrieben, das soweit auch schon funktioniert. "Soweit" bedeutet, daß es funktioniert wenn das entsprechende Bild schon im Cache liegt. Und das Bild in den Cache zu bekommen, darin liegt mein Problem.

Im Netz findet man viele Lösungsvorschläge; z.B. jenen den ich hier poste:
-------------------------------------------------------------------

  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?

Ich poste hier mal meinen kompletten Code; ich hoffe einer von euch kann mir bei meinem Verständnisproblem auf die Sprünge helfen :)

HTML-Code:
-------------------------------------------------------------------
<a name="bildname.jpg" href="#" onclick="LightBox(this)">Linkname</a>
-------------------------------------------------------------------

JS-Code:
-------------------------------------------------------------------

function LightBox(param) {  
 var opacity = 80; // Transparenz des Hintergrunds  
 var gap = 20; // Mindestbreite des transparenten Rahmens um das Bild (in px)  
  
 var img = new Image();  
  img.src = param.name;  
  
 var ratio = img.height / img.width;  
 var imgX, imgY, resize;  
 if (img.width + gap >= document.body.clientWidth) { // Skalierung falls Bild zu breit  
  imgX = document.body.clientWidth - gap;  
  imgY = imgX * ratio;  
  img.style.width = imgX;  
  img.style.height = imgY;  
  resize = true;  
 } else if (img.height + gap >= document.body.clientHeight) { // Skalierung falls Bild zu hoch  
  imgY = document.body.clientHeight - gap;  
  imgX = imgY / ratio;  
  img.style.width = imgX;  
  img.style.height = imgY;  
  resize = true;  
 } else {  
  imgX = img.width;  
  imgY = img.height;  
  img.style.width = imgX;  
  img.style.height = imgY;  
  resize = false;  
 }  
  
 var body = document.getElementsByTagName("body");  
 var backLayer = document.createElement("div"); // <div>-Layer: Transparenter Hintergrund  
   backLayer.style.position = "absolute";  
  backLayer.style.top = "0px";  
  backLayer.style.left = "0px";  
  backLayer.style.width = document.body.clientWidth+"px";  
  backLayer.style.height = document.body.clientHeight+"px";  
  backLayer.style.backgroundColor = "black";  
  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;  
  }  
 var frontLayer = document.createElement("div"); // <div>-Layer: zentrierter Vordergrund  
  frontLayer.style.position = "absolute";  
  frontLayer.style.left = (document.body.clientWidth - imgX) / 2;  
  frontLayer.style.top = (document.body.clientHeight - imgY) / 2;  
  frontLayer.style.cursor = "pointer";  
 var a = document.createElement("a"); // Link der das Bild wieder schließt...  
  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);  
   }  
  }  
 a.appendChild(img);  
 frontLayer.appendChild(a);  
 body[0].appendChild(backLayer);  
 body[0].appendChild(frontLayer);  
}

-------------------------------------------------------------------