Kukulkan: Bildgrösse und Lade-Zeitpunkt

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

  1. Hi

    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?

    Indem du dem Bild einen OnLoad Handler anhängst.

    gruss

    1. Hallo lightfly,

      Indem du dem Bild einen OnLoad Handler anhängst.

      Hm. Was bringt mir das? Kannst Du kurz ein Beispiel machen weil ich in meinem Script ja sofort auf "visible" schalte. Oder führt das zu einem anhalten des Scriptes bis mein Image geladen ist?

      Kukulkan

      1. Hi

        Hm. Was bringt mir das? Kannst Du kurz ein Beispiel machen weil ich in meinem Script ja sofort auf "visible" schalte. Oder führt das zu einem anhalten des Scriptes bis mein Image geladen ist?

        Dein Browser hängt, weil er durch deine Schlaufe mit nichts anderem beschäftigt ist als ständig die Grösse des Bildes abzurufen.

        Das ist keine schöne Lösung, weil du den Browser mit unötigen Befehlen auslastest. Die schönere Lösung ist es, wenn das Bild dem Browser mitteilt, das es jetzt fertig geladen hat. Und dies kann man über einen Event Handler realisieren.

        Lies mal hier den ersten Abschnitt, dann sollte das klarer werden:

        http://de.selfhtml.org/javascript/sprache/eventhandler.htm#allgemeines

        gruss

        1. Hallo,

          Danke, ich hab's jetzt über den onLoad Event gelöst.

          Danke,

          Kukulkan