1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

Bilder vollständig (mit JS) vorausladen...

Dieses Thema im Forum "Web-Programmierung" wurde erstellt von creative7even, 11.08.05.

  1. creative7even

    creative7even Jerseymac

    Dabei seit:
    23.02.05
    Beiträge:
    454
    Hey AT'ler!

    Ich habe eine Funtion geschrieben die mir ein popup-fenster öffnet und den Inhalt komplett mit JavaScript erzeugt, die fenstergrösse anpasst und es dann anschliessend zentriert. Zum Inhalt gehört im wesentlichen ein Image, das auch die fenstergrösse bestimmen sollte.
    Nun zu meinem problem: bisher muss ich die bildgrösse der funktion übergeben, damit das fenster die richtige grösse bekommt. Ich möchte diese werte aber mittels javascript auslesen. Wenn ich auf die image-objekt attribute height und width zugreife dann bekomme ich beim 1. mal laden jeweils 0 zurück, beim 2.mal (also wenn das bild bereits im cache ist) die korrekte dimension. Die preloadImage-funktionen, wie man sie auch vom dreamweaver kennt, helfen hier leider nicht.
    Gibt es eine Möglichkeit Bilder komplett mit Javascript vorauszuladen? Eine Serverseitige script-sprache steht leider nicht zur verfügung...
     
  2. Thof

    Thof Gast

    Salve,

    ich hab' jetzt einfach mal folgendes probiert und bin dabei auf keine Probleme gestoßen:

    Code:
    ...
    <script type="text/javascript">
    <!--
       bild = new Image();
       bild.src = "foo.jpg";
       bilddatenAusgeben();
    
       function bilddatenAusgeben() {
          alert(bild.src + "\n\nLadezustand: " + bild.complete + "\nBreite: " + bild.width + "\nHöhe: " + bild.height);
       }
    // -->
    </script>
    ...
    Ich habe den Code direkt im Kopf einer HTML-Datei ausgeführt und bekam folgende Ausgabe:

    Code:
    foo.jpg
    
    Ladezustand: false
    Höhe: 654
    Breite: 775
    Wenn ich später z.B. über einen Link nochmal auf die Funktion "bilddatenAnzeigen" zugreife wird der Ladezustand des Bildes auch als "true" angezeigt. D.h., dass der Browser auf Anhieb auf die Größenangaben zugreifen kann.

    Ich hab' das allerdings nur mal geschwind auf der Arbeit mit meinem herzallerliebsten IE6 probiert. Laut SelfHTML ist das ganze aber keine IE-spezifische Funktionalität, sollte ergo auch auf anderen Browsern funktionieren (siehe http://de.selfhtml.org/javascript/objekte/images.htm).

    Ausnahme: die "complete"-Methode des Image-Objekts wird wohl von Safari nicht unterstützt... wie gesagt... lt. SelfHTML; ich kann im Moment nicht prüfen, ob es vielleicht mit Safari 2.0 aus dem Tiger funktioniert.

    Für den Fall, dass ein anderer Browser die Bildinfos erst bereitstellt, wenn das Bild vollständig geladen wurde könntest du evtl. ein Intervall anzulegen, das prüft ob das Bild geladen ist.

    Code:
    bild = new Image();
    bild.src = "foo.jpg";
    var intervall = window.setIntervall("pruefen()", 50);
    
    function pruefen() {
       if(bild.complete) {
          window.clearIntervall(intervall);
          // ... weiterverarbeitung mit dem Bild, da JETZT die Infos verfügbar sein sollten ;-)
       }
    }
    ich hoffe, das geht in die Richtung dessen, was du erwartet hast ;)

    Gruß,
    Thomas.
     
  3. creative7even

    creative7even Jerseymac

    Dabei seit:
    23.02.05
    Beiträge:
    454
    Hallo & Danke für die ausführliche Hilfe!

    An die Eigenschaft complete hatte ich auch schon gedacht - bin aber dann am Safari (1.3, Panther 10.3.9) gescheitert - der liefert nämlich den Wert "undefined". Eine weitere Lösung wäre der Weg über den Event-Handler onload, der es ermöglicht, nach dem laden eine funktion auszuführen.

    Code:
    ...
    <html>
    <head>
    <script type="text/javascript" language="javascript">
    <!--
    
       function bilddatenAusgeben() {
          alert(document.images[0].src + "\n\nLadezustand: " + document.images[0].complete + "\nBreite: " + document.images[0].width + "\nHöhe: " + document.images[0].height);
       }
    // -->
    </script>
    </head>
    <body onload="bilddatenAusgeben();">
    test.html
    <img src="foo.jpg" />
    </body>
    </html>
    
    ... dann werden auch die Bilddaten korrekt ausgegeben.

    Mein Problem besteht aber darin, dass ich das Popupfenster (genauer gesagt: den Inhalt dessen) komplett mittels javascript erzeuge:

    Code:
    function viewImage (file, alt, width, height) {
    	var p = window.open('','popup', 'width=350,height=145,toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=1');
    	if (p != null) {
    		// Inhalt erzeugen
    		p.document.write("<p>hello foo</p>");
    		p.document.write("<img src=\"" + file + "\" alt=\"" + alt + "\" />");
    		// usw... hier folgt dann Fenstergrösse anpassen und Ausrichten.
    		resizeAndPositionWindow(p, width, height);
    	}
    }
    
    Das erleichtert mir das einbinden von popups, indem ich nur auf das script-file referenzieren muss, egal auf welcher Verzeichnisebene ich mich befinde. Nun möchte ich aber das Auslesen der Bildinfo automatisieren, um so die Fenstergrösse an das Bild anzupassen (ist ja wesentllich komfortabler wenn man den content von hand codiert, und die bilddimensionen nicht ständig gleich bleiben).

    Der letzte Lösungsansatz war das erzeugen von javascript-code mittels javascript (also irgendwie rekursiv - nicht lynchen für diese programmiertechnische sauerei :eek: ), um die onload-funktionalität (siehe erstes code-bsp) ausnützen zu können. Das scheint Safari aber nicht zu beeindrucken - der arbeitet alles hierachisch ab - d.h.: es funktioniert auch hier wieder nicht.

    Wahrscheinlich gibt es für dieses Problem keine Lösung, sodass ich mich mit der bisherigen Lösung wohl abfinden muss, und die dimensionen (height & width) jedesmal an die funktion übergeben muss.

    creative7
     

Diese Seite empfehlen