Opera verändert bildgröße nicht

[Steffen]

Hi zusammen,

um Bilder immmer etwa gleich groß anzuzeigen, habe ich eine kleine Funktion geschrieben, welche mir die größe anpasst. Soweit kein Problem und läuft auch 1a, außer im Opera.
Da wird die Bildgröße nicht geändert, außer wenn ich irgendwo in der Schleife ein alert habe.

Hat jemand dieses Problem schon gehabt bzw. weiß was die Ursache ist.

var maxWidth = 200;  
 var maxHeight = 170;  
 var ratio; // aspect ratio  
 var actualHeight; // actual height at width of 200  
 var actualWidth; // actual width at height of 170  
 var margin; // required margin to center  
  
 for(var i=0; i < images.length; i++) {  
  if(images[i]){  
   temp = new Image();  
   temp.src = 'images/offer/' +images[i];  
   ratio = temp.width / temp.height;  
   alert("sadhfj"); // Dann gehts, ohne nur im FF und ie  
   if(ratio > 1) { // horizontal format  
    actualHeight = maxWidth / ratio; // calc actual height at resize to maxWidth  
    margin = (maxHeight - actualHeight) / 2; // calc required margin to center  
    margin = Math.floor(margin); // round to next lower integer  
  
    document.getElementsByTagName('img')[i].style.width = maxWidth +'px'; // Set width  
  
    document.getElementsByTagName('img')[i].style.top = margin +'px'; // Set margin  
   }  
   else { // high size  
    actualWidth = maxHeight * ratio; // calc actual width at resize to maxHeight  
    margin = (maxWidth - actualWidth) / 2; // calc required margin to center  
    margin = Math.floor(margin); // round to next lower integer  
    document.getElementsByTagName('img')[i].style.height = maxHeight +'px'; // Set height  
    document.getElementsByTagName('img')[i].style.left = margin +'px'; // Set margin  
   }  
  }  
 }

Danke und Gruß
Steffen

[Hopsel]

Hi Steffen!

Ich weiß nicht, ob dir der Beitrag von wahsaga weiterhilft, aber dein Problem hat mich gleich an sein Zitat erinnert:
"Opera checkt's nicht gleich, also ziehe ich ihm kurz einen mit dem Zaunpfahl über, als kleinen Denkanstoss ...".

MfG H☼psel

[Steffen]

Hi Steffen!

Ich weiß nicht, ob dir der Beitrag von wahsaga weiterhilft, aber dein Problem hat mich gleich an sein Zitat erinnert:
"Opera checkt's nicht gleich, also ziehe ich ihm kurz einen mit dem Zaunpfahl über, als kleinen Denkanstoss ...".

MfG H☼psel

Antwort sehr logisch und hilfreich, da man ja weiß das der Opera JavaScript nicht unbedingt gerne hat.

Leider bewirkt es bei mir nicht den erhofften effekt.

Oder baue ich es nur an falscher Stelle ein?

[ritschmanhard]

Hi Steffen,

ohne das jetzt genau geprüft zu haben, tippe ich auf folgendes:
Du legst mit temp = new Image() ein Bildobjekt an, welches durch temp.src='foo.png' geladen wird.
WENN nun Opera, bevor die Daten in temp vollständig geladen wurden, die nächste(n) Zeile(n) ausführt (Modifikation des Styles), dann wird dieser eventuell nach Fertigladen des Bildes wieder überschrieben...(Das würde dann auch erklären, weswegen der alert hilft, da er "Ladezeit" schafft.
Ich denke, dass du mit http://de.selfhtml.org/javascript/objekte/window.htm#set_timeout@title=settimeout und Prüfung auf http://de.selfhtml.org/javascript/objekte/images.htm#complete@title=complete eventuell das Problem lösen kannst.

Grüße,
Richard

[Steffen]

Hi,
auch dir erstmal danke für die schnelle Hilfe.
Leider hilft das, insofern ich das mit if(temp.complete){ alles nach temp = new Image(); }
Richtig gemacht habe leider nicht.

Gruß Steffen

[ritschmanhard]

Hi Steffen,

ist leider nicht ganz richtig...

  
var glob_temp;  
  
function checker()  
{  
  if (!glob_temp.complete)  
     window.setTimeout("checker()",100)  
  else  
  {  
     //dein weiterer Code zur behandlung von glob_temp  
  }  
}  
  
function load()  
{  
  glob_temp=new Image();  
  glob_temp.src="foo.png";  
  checker();  
}  

So meine ich das..

Grüße,
Richard

[Steffen]

Kann es sein das es durch den aufruf in einer Schleife hier zu Porblemen kommt?

Danke und Gruß
Steffen

[ritschmanhard]

Hi Steffen!

Ja, ist so. Mit Schleife:

  
var glob_temp;  
  
function checker()  
{  
  if (!glob_temp.complete)  
     window.setTimeout("checker()",100);  
  else  
  {  
     //dein weiterer Code zur behandlung von glob_temp  
     glob_temp=null;  
  }  
}  
  
function load(index)  
{  
  if (glob_temp==null)  
  {  
       glob_temp=new Image();  
       glob_temp.src="foo["+index+"].png";  
       index++;  
       checker();  
  }  
  if (index<10) //indices from 0-9  
     window.setTimeout("load("+index+")",100);  
}  
  
function initLoop()  
{  
   glob_temp=null;  
   load(0);     //indices from 0-9  
}  
  
initLoop();  

Grüße,
Richard

[Struppi]

if(images[i]){
   temp = new Image();
   temp.src = 'images/offer/' +images[i];
   ratio = temp.width / temp.height;

Du musst hier warten, bis das Bild geladen wurde, in jedem Browser. Das geht mit onload.

var temp = new Image();  
temp.onload = function() {  
alert(this.width);  
};  
temp.src = 'images/offer/' +images[i];  

Da der IE den onload Event nicht feuert, wenn das Bild bereits im Cache ist musst du dir in dem Fall etwas überlegen, z.b.

var temp = new Image();  
temp.onload = function() {  
fertig(this);  
};  
temp.src = 'images/offer/' +images[i];  
if(temp.complete) fertig(temp);  
  
function fertig(bild){  
alert(bild.width);  
}  

Struppi.

[Steffen]

Du musst hier warten, bis das Bild geladen wurde, in jedem Browser. Das geht mit onload.

[code lang=javascript]var temp = new Image();
temp.onload = function() {
alert(this.width);
};

Hi Struppi,

hört sich gut an, leider habe ich immer wenn ich ne neue function(){} mache,
meine variablen nicht mehr....

Da noch ne Idee?

[molily]

hört sich gut an, leider habe ich immer wenn ich ne neue function(){} mache,
meine variablen nicht mehr....

Welche Variablen? Die, die außerhalb oder die, die innerhalb der for-Schleife einen Wert bekommen?

Prinzipiell hat die verschachtelte Funktion Zugriff auf die Variablen der äußeren Funktion. Wenn du die Funktionen verschachtelt notierst, hast du auch im load-Handler Zugriff darauf. Die Funktion fertig von Struppi musst du nur in der Funktion notieren, in der du auch maxWidth, maxHeight usw. notierst.

Bei for-Schleifen muss man nur etwas aufpassen, weil zu dem Zeitpunkt, wo der load-Handler feuert, die Variable schon einen anderen Wert hat, weil die Schleife ja weiter gelaufen ist.

Mathias

[Steffen]

Laut meinen versuchen sind die variabelen wenn ich irgendwo function(){}
immer nur außerhalb verfügbar, ob es in einem callback ist oder in nem timeout oder sonst wo.

Gruß Steffen

[molily]

Laut meinen versuchen sind die variabelen wenn ich irgendwo function(){}
immer nur außerhalb verfügbar, ob es in einem callback ist oder in nem timeout oder sonst wo.

Da irrst du dich oder machst etwas falsch in deinen Versuchen.

http://aktuell.de.selfhtml.org/artikel/javascript/organisation/#closures
http://aktuell.de.selfhtml.org/artikel/javascript/organisation/#closures-anwendung

Dort wird die Anwendung gerade bei Callbacks bzw. Event-Handlern und Timeouts demonstriert.

Mathias

[Struppi]

hört sich gut an, leider habe ich immer wenn ich ne neue function(){} mache,
meine variablen nicht mehr....

Was heißt das?
was für eine neue function?

übrigens von der Version die mit timeout auf complete testet, würde ich die Finger lassen. sie ist a. nicht zuverlässig und funktioniert b. in wenigen Browsern nicht.

Struppi.

[ritschmanhard]

Hi Struppi,

übrigens von der Version die mit timeout auf complete testet, würde ich die Finger lassen. sie ist a. nicht zuverlässig und funktioniert b. in wenigen Browsern nicht.

1. Kannst du mir auf die Sprünge helfen, was a) betrifft - ich seh nämlich nicht, wo der Vorschlag unzuverlässig wäre (man kann sich, wenn man möchte, ja sogar einen Übergabeparameter zu checker dazubasteln, so dass bei Fehlerhaften Dateien / zu langem Warten auf complete einfach weitergegangen wird (hier nach 1 min), also dann:

  
function checker(iter)  
{  
  if (!glob_temp.complete && iter < 600)  
  {  
     iter++  
     window.setTimeout("checker("+iter+")",100);  
  }  
  else  
  {  
     if (iter<600)  
     {  
       //dein weiterer Code zur behandlung von glob_temp  
     }  
     glob_temp=null;  
  }  
}  
  
function load(index)  
{  
//...  
   checker(0);  
//...  
}  

2. Verstehe ich nicht ganz, dass es (standardkonform) möglich ist, einem Image Objekt einen onload handler zu verpassen, denn nach
   http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onload@title=onload gibt es selbiges event doch nur für frameset & body?

Grüße,
Richard

[molily]

1. Kannst du mir auf die Sprünge helfen, was a) betrifft - ich seh nämlich nicht, wo der Vorschlag unzuverlässig wäre

Unzuverlässig letztlich nicht, aber man müsste dein Script sehr stark abändern, damit das möglich ist, was mit vielen autonomen Image-Objekten mit load-Handlern möglich ist. Dieses "Pollen" mit Timeouts ist immer umständlich und unkomfortabel im Vergleich zum Event-Handling. Man macht das nur dann, wenn kein Event-Handling möglich ist.

2. Verstehe ich nicht ganz, dass es (standardkonform) möglich ist, einem Image Objekt einen onload handler zu verpassen

Das DOM-Interface für Image-Objekte ist nicht identisch mit den erlaubten Attributen für das img-Element.
Netscape JavaScript 1.1

Mathias

[ritschmanhard]

Hi Mathias,

Das DOM-Interface für Image-Objekte ist nicht identisch mit den erlaubten Attributen für das img-Element.
Netscape JavaScript 1.1

Cool, danke für den Link.

Grüße,
Richard

[Struppi]

übrigens von der Version die mit timeout auf complete testet, würde ich die Finger lassen. sie ist a. nicht zuverlässig und funktioniert b. in wenigen Browsern nicht.

1. Kannst du mir auf die Sprünge helfen, was a) betrifft - ich seh nämlich nicht, wo der Vorschlag unzuverlässig wäre (man kann sich, wenn man möchte, ja sogar einen Übergabeparameter zu checker dazubasteln, so dass bei Fehlerhaften Dateien / zu langem Warten auf complete einfach weitergegangen wird (hier nach 1 min), also dann:

... einen Workaround basteln, denn man mit den Eventhandler sich sparen kann.

Und einige ältere Versionen von Netscape setzen complete nicht korrekt (was man aber im Grunde vernachlässigen kann, da diese Browser dann i.d.R. sowieso nicht mehr zu gebrauchen sind)

Struppi.