Javascript Fenster an Bild anpassen

[timroh]

Hallo,
Ich habe einen Banner, der zwölf Bilder mittels einer for Schleife in eine Flashdatei lädt. Beim Klick auf eines soll mittels getURL der Bildname an Javascript übergeben werden. Das funktioniert alles soweit. Das mit Javascript erzeugte Fenster soll sich jetzt dem Bild anpassen. Beim ersten Mal funktioniert es irgendwie nie. Wenn ich jedoch ein zweites Mal auf das Bild klicke, ermittelt Javascript die Bildgrösse korrekt und passt das Fenster auch an.
mein Javascript:

PHP-Code:

function pause(milliseconds) {
    var dt = new Date();
    while ((new Date()) - dt <= milliseconds) { /* Do nothing */ }
}

bildoeffnen = function(aurl){
    ladebild = new Image;
    ladebild.src = aurl;
    pause(100);
    hoehe = ladebild.height;
    breite = 300;
    alert(hoehe); //das erste Mal immer 0. Danach 225 (richtige Grösse)
    Bild = window.open(aurl,'Bild'+aurl,'width='+breite+'px,height='+hoehe+'px,status=no,location=no,toolbar=no,scrollbars=no,resizable=no');
} 


Ich kann sonst auch den Link posten (wenn das erlaubt ist...), wo das ganze zu finden ist oder die .fla anhängen.

Tim

[thomas_E]

der Fehler rührt daher, dass zum Zeitpunkt wo hoehe = ladebild.height; ausgeführt wird, das Bild noch nicht geladen ist, und somit auch noch keine Breite hat.


-deine pause-Funktion ist denkbar ungünstig, sie lastet JS/den Browser komplett aus.
im schlimmsten Fall stürzt der Browser sogar ab.

- ich meine nicht dass Image in allgemein verbreitet ist.

- du solltest dich dringend mit dem Geltungsbereich von Variablen in JS auseinandersetzen. du hast ALLE variablen global erzeugt.

hier mal eine überarbeitet Version des Codes:

PHP-Code:

bildoeffnen = function(aurl){
    var ladebild = document.createElement('img');
        ladebild.src = aurl;

    var interval = 100;
    var countdown = 5000;
    
    function wait(){
        if(ladebild.width>0 || ladebild.height>0){
            var breite = 300;
            var hoehe = ladebild.height;
        
            window.open(
                aurl,
                'Bild'+ aurl, 
                'width='+ breite +'px, height='+ hoehe +'px, status=no, location=no, toolbar=no, scrollbars=no, resizable=no'
            );
            
        }else if(countdown > 0){
            countdown -= interval;
            window.setTimeout(wait, interval);

        }else{
            alert("Timeout bei: \n"+ aurl);

        }
    }
    
    wait();
} 


die Funktion wait ruft sich selbst immer wieder auf, bis eine breite/hoehe verfügbar ist oder die angegebene Wartezeit überschritten wurde.

ich hab hierzu noch zwei Variablen definiert.
interval gibt den Interval in ms an, in dem die Grösse des Bildes überprüft werden soll.
countdown gibt die Gesamtzeit in ms an, die wait maximal ausgeführt werden soll, bevor das ganze abgebrochen wird.


alternativ könntest du das Bild per AJAX vorladen, da hast du dann ein quasi-COMPLETE-event.

[timroh]

Das Skript funktioniert irgendwie noch nicht so ganz. Jetzt passiert beim ersten Klick gar nichts mehr, dafür geht das Fenster beim Zweiten direkt richtig auf.

[timroh]

...Und meine Pause diente lediglich dazu, dass das Bild laden konnte (hat sich wohl als falsch erwiesen.

[thomas_E]

dann zeig mal den Rest deines Codes.
verlink die Seite.

weil bei mir funzt das JS einwandfrei.

[CaselPasel]

Hey,
mal halt hier!
Ihr macht das viel zu kompliziert mit euren warten. Wenn warten dann mit closures.

bildoeffnen = function(aurl){
	ladebild = new Image;
	ladebild.src = aurl;
	window.setTimeout(function() {
		hoehe = ladebild.height;
		breite = 300;
		alert(hoehe); //das erste Mal immer 0. Danach 225 (richtige Grösse)
		Bild = window.open(aurl,'Bild'+aurl,'width='+breite+'px,height='+hoehe+'px,status=no,location=no,toolbar=no,scrollbars=no,resizable=no');
	 }, 100);   
}

Aber dies ist natürlich auch nicht die Lösung wenn man mit Bilder arbeitet.
Da sollte man das event onload benutzten.

bildoeffnen = function(aurl){
	ladebild = new Image;
	ladebild.onload = function() {
		hoehe = ladebild.height;
		breite = 300;
		alert(hoehe); //das erste Mal immer 0. Danach 225 (richtige Grösse)
		Bild = window.open(aurl,'Bild'+aurl,'width='+breite+'px,height='+hoehe+'px,status=no,location=no,toolbar=no,scrollbars=no,resizable=no');
	}
	ladebild.src = aurl;
}

[timroh]

@CaselPasel bei deinem zweiten Script wird jetzt die Höhe jedes mal korrekt ausgegeben, es öffnet sich aber kein neues Fenster.

[CaselPasel]

Hey,
lass dir mal aurl ausgeben.
Es kann ja nur noch an open liegen.

Oda hast du einen Popup blocker an??

Mit freundlichen Grüßen

Cas

[timroh]

aurl gibt mir jedes Mal den richtigen Pfad aus: 300px/bilder/bild_5.jpg

[CaselPasel]

Hey,
nimm mal für window.open einen absoluten pfad sprich mit url.

Mit freundlichen Grüßen

Cas

[timroh]

geht auch nicht

[CaselPasel]

Hey,
SELFHTML: JavaScript / Objektreferenz / window

schau es dir genau an. Die Höhe und Breite gibt man nicht mit PX an.
Kontrolliere bitte alles. Dann müsste es funktionieren.

Mit freundlichen Grüßen

Cas

[adulti]

window.open einen absoluten pfad sprich mit url. Das ist richtig