Probleme mit animierten Gifs im IE7

[jmrickson]

Servus alle zusammen,

ich habe folgendes Problem.

Ich programmiere ein Quiz für eine Webseite. Neu Fragen werden per Ajax nachgeladen.

Ein animiertes Gif zeigt an wie viel Zeit noch zur Beantwortung der aktuellen Frage bleibt.

Nach jedem erfolgreichen request wird das Bild mit

  
vorladen=new Image();  
bildpfad = "meinVerzeichnis/" + "animiert.gif";  
vorladen.src = bildpfad;  
  
$('timerbild').src =vorladen.src;  

~~~(Benutze Prototype) durch sich selber ersetzt und startet die animation neu. Das funktioniert auch wunderbar in Opera, Firefox, Safari, IE 6 und Chrome. Nur, wie könnte es auch anderst sein, der IE7 sieht die sache wieder ein wenig anderst. Er läd das gif einfach nicht wirklich neu, sondern macht mit der animation einfach da weiter, wo sie vor dem neuladen gestanden hat. Also wenn die Animation vor dem Request bei 20 sekunden war, läuft die Animation nach dem neuladen einfach bei 21 Sekunden weiter.  
  
Ich denke es hängt irgendwie mit dem cachemanagment vom IE7 zusammen. Gibt es dafür einen Workaround? Das Script an sich interpretiert er ja richtig, wenn ich eine andere Grafik zum tauschen einsetzte tauscht er sie auch aus. Ich hatte auch schon getestet eine andere Grafik einzusetzen während der Request läuft, aber auch das hat nichts gebracht. Es ist als würde das Gif im Cache weiterlaufen...  
  
Ich habe Google schon mit Suchanfragen bombardiert.... aber für meine spezielle Problematik keine Lösung gefunden die funktioniert...  

[Klawischnigg]

Hi there,

[...]und startet die animation neu. Das funktioniert auch wunderbar in Opera, Firefox, Safari, IE 6 und Chrome. Nur, wie könnte es auch anderst sein, der IE7 sieht die sache wieder ein wenig anderst. Er läd das gif einfach nicht wirklich neu, sondern macht mit der animation einfach da weiter, wo sie vor dem neuladen gestanden hat.

Bei einem animierten Gif kennst Du den aktuellen Zustand nicht wirklich. Es ist eher erstaunlich, daß es in anderen Browsern funktioniert. Manche Browser zB halten die Animation unter bestimmten Umständen an (Mauszeiger über anderen Tab führen etc.)
Besser wäre eine Lösung, in der Du die Abfolge der Bilder bestimmst und nicht der Browser, ich denke da an eine Lösung mit CSS-Sprites...

[jmrickson]

»»»» Bei einem animierten Gif kennst Du den aktuellen Zustand nicht wirklich. Es ist eher erstaunlich, daß es in anderen Browsern funktioniert. Manche Browser zB halten die Animation unter bestimmten Umständen an (Mauszeiger über anderen Tab führen etc.)

Besser wäre eine Lösung, in der Du die Abfolge der Bilder bestimmst und nicht der Browser, ich denke da an eine Lösung mit CSS-Sprites...

Danke für die schnelle Antwort,
hätte zwar gerne mit animierten Gifs gearbeitet aber die Lösung mit CSS-Sprites scheint mir objektiv betrachtet tatsächlich besser zu sein. Ich hoffe nur das sich die Datenmenge dadurch nicht beträchtlich erhöht. Auf jeden Fall schon einmal vielen Dank..

[jmrickson]

»»»» Bei einem animierten Gif kennst Du den aktuellen Zustand nicht wirklich. Es ist eher erstaunlich, daß es in anderen Browsern funktioniert. Manche Browser zB halten die Animation unter bestimmten Umständen an (Mauszeiger über anderen Tab führen etc.)

Besser wäre eine Lösung, in der Du die Abfolge der Bilder bestimmst und nicht der Browser, ich denke da an eine Lösung mit CSS-Sprites...

Danke für die schnelle Antwort,
hätte zwar gerne mit animierten Gifs gearbeitet aber die Lösung mit CSS-Sprites scheint mir objektiv betrachtet tatsächlich besser zu sein. Ich hoffe nur das sich die Datenmenge dadurch nicht beträchtlich erhöht. Auf jeden Fall schon einmal vielen Dank..

Die Bildergröße ist sogar geringer...  Hab ein kleines Script dafür geschrieben. Bin kein großer JavaScript programmierer, also verzeit mir bitte das ein oder andere ;-)

--------
JavaScript
--------

  
  
var clockstop_;  
var time;  
var maxtime=61;  
var bildbreite=400;  
var pause;  
  
function imageclock(){  
	  
        time++;  
        document.getElementById('meineID').style.backgroundPosition=(time*bildbreite)+'px 0';  
  
	  
      if (time == maxtime){  
	alert("Ihre Zeit ist leider abgelaufen");  
	clockstop();  
	}  
	if (clockstop_==0)  
	{pause = setTimeout('imageclock()',1000);}  
      }  
  
function clockstop(){ // beendet die Animation  
   clearTimeout(pause);  
   clockstop_=1;  
   time=0;  
}  
  
function clockrun(){ // startet die Animation  
   time=0;  
   clockstop_=0;  
   imageclock();  
}  

-----------
CSS
-----------

  
  
#meineID {  
    width: 400px;  
    height: 400px;  
    text-decoration: none;  
    display: block;  
    background: url('pfadZum/Bild.gif') 0 0;  
    background-position: 24400px 0;  
  
}  

---------
HTML
---------

  
<span id="meineID"></span>  
  

Kann vielleicht dem einen anderen als Anlaufhilfe dienen.

[Thomas Luethi]

Hallo,

Wenn Du es (trotz den Einwänden von Klawischnigg) mit dem
animierten GIF machen willst, könntest Du evtl. den MS IE
austricksen, indem Du an die URL des GIFs einen zufälligen
Query-String dranhängst, im Stil
meinVerzeichnis/animiert.gif?zufall=Xch2ien9
Du müsstest also die Zeile
bildpfad = "meinVerzeichnis/" + "animiert.gif";
entsprechend ergänzen.

HTH, mfg, Thomas

[jmrickson]

Hallo,

Wenn Du es (trotz den Einwänden von Klawischnigg) mit dem
animierten GIF machen willst, könntest Du evtl. den MS IE
austricksen, indem Du an die URL des GIFs einen zufälligen
Query-String dranhängst, im Stil
meinVerzeichnis/animiert.gif?zufall=Xch2ien9
Du müsstest also die Zeile
bildpfad = "meinVerzeichnis/" + "animiert.gif";
entsprechend ergänzen.

HTH, mfg, Thomas

Also mit zufallszahl angehängt funtioniert es...
Allerdings verliert man so natürlich auch den Vorteil das das Bild schon vorgeladen ist...

Allerdings ist das wahrscheinlich die einzige Möglichkeit die im IE funktioniert...

[ChrisB]

Hi,

Nur, wie könnte es auch anderst sein, der IE7 sieht die sache wieder ein wenig anderst. Er läd das gif einfach nicht wirklich neu, sondern macht mit der animation einfach da weiter, wo sie vor dem neuladen gestanden hat.

Wie sieht es aus, wenn du wirklich ein neues Bildelement ins DOM einhängst?

MfG ChrisB

[jmrickson]

Hi,

Nur, wie könnte es auch anderst sein, der IE7 sieht die sache wieder ein wenig anderst. Er läd das gif einfach nicht wirklich neu, sondern macht mit der animation einfach da weiter, wo sie vor dem neuladen gestanden hat.

Wie sieht es aus, wenn du wirklich ein neues Bildelement ins DOM einhängst?

MfG ChrisB

Hi,

in dem Fall ersetzt er das alte Bild mit dem neuen. Es liegt also nicht an der Funktion an sich. Aber für jede Frage eine eigene Kopie des Bildes zu erstellen läuft absurdum...

Ich habe das mit dem Gif vorerst verworfen... auch wenn es eine schöne Lösung gewesen wäre...

Warum ist es eigentlich immer der IE der Probleme macht... die Firma die das größte Buget zur Verfügung hat schafft es nicht einen standartkonformen Browser zu programmieren...

[ChrisB]

Hi,

Wie sieht es aus, wenn du wirklich ein neues Bildelement ins DOM einhängst?

in dem Fall ersetzt er das alte Bild mit dem neuen.

Mit welchem Effekt?

Aber für jede Frage eine eigene Kopie des Bildes zu erstellen läuft absurdum...

Wie meinen?

MfG ChrisB

[bleicher]

Grüße,
und "text-counter" ist nicht Glamour genug?
MFG
bleicher

[jmrickson]

Grüße,
und "text-counter" ist nicht Glamour genug?
MFG
bleicher

An sich bin ich PHP Programmierer und löse alles was ich Serverseitig lösen kann auch Serverseitig und lege auch mehr wert auf Funktionalität als auf Aussehen.

Bin auch kein Fan davon Designfragen mit Javascript zu lösen... schließlich gibt es CSS. Aber manchmal soll es halt etwas besser aussehen. Und bevor ich Flash benutze hacke ich mir eher die Finger ab.

Habe auch schon dran gedacht noch nen text-counter als sicherheit einzubauen.. das Gif sticht halt wesentlich mehr ins Auge, was auch so sein sollte, denn wenn der User nicht rechtzeitig klickt hat er Pech gehabt.

[bleicher]

Grüße,

An sich bin ich PHP Programmierer und löse alles was ich Serverseitig lösen kann auch Serverseitig und lege auch mehr wert auf Funktionalität als auf Aussehen.

ersteres ist höchstens anlass sich mal mit neuen Techniken zu befassen, 2es widerspricht sich selbst - "funktionalität" ist jmit "weniger bilder" beinahe gleichzusetzen

Bin auch kein Fan davon Designfragen mit Javascript zu lösen... schließlich gibt es CSS. Aber manchmal soll es halt etwas besser aussehen. Und bevor ich Flash benutze hacke ich mir eher die Finger ab.

timer löst man nun mal per JS - siehst du bei jedem vernünftigen filhoster^^

Habe auch schon dran gedacht noch nen text-counter als sicherheit einzubauen.. das Gif sticht halt wesentlich mehr ins Auge, was auch so sein sollte, denn wenn der User nicht rechtzeitig klickt hat er Pech gehabt.

css bietet da einiges an mitteln um augenkrebs zu provozieren, fonts, farben?
MFG
bleicher

[jmrickson]

Grüße,

An sich bin ich PHP Programmierer und löse alles was ich Serverseitig lösen kann auch Serverseitig und lege auch mehr wert auf Funktionalität als auf Aussehen.

ersteres ist höchstens anlass sich mal mit neuen Techniken zu befassen, 2es widerspricht sich selbst - "funktionalität" ist jmit "weniger bilder" beinahe gleichzusetzen

Bin auch kein Fan davon Designfragen mit Javascript zu lösen... schließlich gibt es CSS. Aber manchmal soll es halt etwas besser aussehen. Und bevor ich Flash benutze hacke ich mir eher die Finger ab.

timer löst man nun mal per JS - siehst du bei jedem vernünftigen filhoster^^

Habe auch schon dran gedacht noch nen text-counter als sicherheit einzubauen.. das Gif sticht halt wesentlich mehr ins Auge, was auch so sein sollte, denn wenn der User nicht rechtzeitig klickt hat er Pech gehabt.

css bietet da einiges an mitteln um augenkrebs zu provozieren, fonts, farben?
MFG
bleicher

(Läuft nur einnmal durch)

Das ist eines dieser Gifs... und es wird mir wohl jeder recht geben das der gleiche Effekt mit einem reinem TEXT-COUNTER wohl ziemlich schwierig umzusetzen wäre. Ich werde auch hierzu keine Kommentare mehr schreiben weil dies wieder einer dieser Diskusionen sind die zu nichts führen. Ich bin weder ein Designer der seinen Hintergrund zeichnet und das dann als 1,5 MB Hintergrundbild auf die Seite klatscht am besten noch mit Javascript Popdown-menüs.... noch jemand der eine Seite mit blinkenden und funkelnden Gifs vollklatscht.

Auserdem programmiere ich auch noch JAVA Aplikationen... bin also durchaus offen für neue Techniken.

Over and out.

[Joachim]

Hi,

Ein animiertes Gif zeigt an wie viel Zeit noch zur Beantwortung der aktuellen Frage bleibt.

ich habe Dein Problem nicht ganz verstanden, aber grundsätzlich hilft immer eine Zufallsquery an den Dateinamen angehängt, um dem Browser vorzugaukeln, dass er eine neue Datei laden soll. Diese wird dann nicht aus dem Cache geholt.

Gruesse, Joachim

[ChrisB]

Hi,

Nach jedem erfolgreichen request wird das Bild mit

vorladen=new Image();
bildpfad = "meinVerzeichnis/" + "animiert.gif";
vorladen.src = bildpfad;

$('timerbild').src =vorladen.src;

  
Das kann ich im IE 8 sowohl im 8er-Modus als auch im Kompabilitätsmodus nachvollziehen.  
  
Allerdings nur so lange, wie ich auch den Vorlade-Kram so wie von dir gezeigt mit drin habe.  
  
Wenn ich das weglasse, und einfach nur dem src-Attribut des Bildes den Inhalt, den es eh schon hat, noch mal erneut zuweise (sogar `Bildobjekt.src = Bildobjekt.src;`{:.language-javascript} reicht aus) - dann startet mir auch der IE die Animation von vorne.  
  
MfG ChrisB  
  

-- 
“Whoever best describes the problem is the person most likely to solve the problem.” [Dan Roam]