Hallo,
Um ein Thumbnail zu vergrössern, lade ich das grosse Bild nach einem Mausclick in einen DIV Container:
function zoom(original, imageurl) {
document.getElementById("zoom").innerHTML = "<img src='" + imageurl + "' id='zoomimage' onclick='JAVASCRIPT: zoomhide();'>";
// start coordinates
StartX = window.event.clientX;
StartY = window.event.clientY;
StartW = 0;
StartH = 0;
// destination coordinates
DestX = (GetPageWidth() - document.getElementById("zoomimage").width) / 2;
DestY = (GetPageHeight() - document.getElementById("zoomimage").height) / 2;
DestW = document.getElementById("zoomimage").width;
DestH = document.getElementById("zoomimage").height;
(...)
}
Das Problem ist, dass ich in den Zeilen in denen ich die width und height Werte abfrage (zB die letzten beiden), beim ersten Mal nur Zahlen um die 32 rauskommen (das Bild ist schlicht noch nicht geladen). Beim nächsten Klick klappt es dann (Bild geladen und im Cache).
Ich habe versuche in einem einen Loop zu warten:
while (document.getElementById("zoomimage").width < 40) {
}
Das führte zu aufgehängtem Internet Explorer und Timeout im Firefox (hat nur im Opera geklappt). Auch die complete-Eigenschaft für Images machte nur Ärger und funktionierte nur unter Opera zuverlässig:
while (document.getElementById("zoomimage").complete == false) {
}
Wie kann ich mein Problem lösen ohne die Grafiken alle vorher schon laden zu müssen? Wie kann ich feststellen (ohne timeout und aufhängen) ob das Bild jetzt verfügbar ist nachdem ich den Content mit innerHTML gesetzt habe?
Dankbar um jede konstruktive Antwort!
Kukulkan