• Apfeltalk ändert einen Teil seiner Allgemeinen Geschäftsbedingungen (AGB), das Löschen von Useraccounts betreffend.
    Näheres könnt Ihr hier nachlesen: AGB-Änderung
  • Viele hassen ihn, manche schwören auf ihn, wir aber möchten unbedingt sehen, welche Bilder Ihr vor Eurem geistigen Auge bzw. vor der Linse Eures iPhone oder iPad sehen könnt, wenn Ihr dieses Wort hört oder lest. Macht mit und beteiligt Euch an unserem Frühjahrsputz ---> Klick

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

creative7even

creative7even

Jerseymac
Registriert
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...
 

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.
 
creative7even

creative7even

Jerseymac
Registriert
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
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
2003-2024 Apfeltalk | Made on a Mac
Oben Unten