preload wird ignoriert

[Rolf]

Hallo,

habe eine Seite auf der in kurzen Abständen Bildchen (25 x 25 Pixel) angezeigt werden,
so dass es wie eine Animation ausschaut.
Lokal ist das alles super, aber online klemmts ... :-(

Also habe ich eine preload-Funktion rausgesucht und eingebaut. Das Laden funktioniert
auch primstens, aber anschliessend werden die Bildchen wieder vom Server, statt aus
dem Cache gezogen. Im FF ruckelt sich das noch so hin, aber im IE sieht man nach ca.
30 Sekunden nur das letzte Bild.

Ach-ja, ist sicherlich auch wichtig:
Hier im Wald gibt es "postbased-DSL", d.h. die IP-Pakete werden mit DHL zugestellt,
oder wie soll man 448 kBit/s sonst beschreiben ... :-(
Wer also einen heissen Draht zum Internet hat, wird sicher keine Probleme erkennen
können, vermute ich mal so ...

mbG Rolf

[JürgenB]

Hallo Rolf,

nur eine Idee:

statt den Flieger jedesmal neu (aus dem Cache) zu laden lege die 360 Bilder doch einfach alle irgendwo unsichbar auf der Seite ab und schiebe sie dann bei Bedarf an die gewünschte Stelle.

Außerdem glaube ich nicht, das für die Richtungen 360 Bilder notwendig sind. Alle 5 Grad oder so würde auch reichen.

Gruß, Jürgen

[Rolf]

Hallo Jürgen,

nur eine Idee:
statt den Flieger jedesmal neu (aus dem Cache) zu laden lege die 360 Bilder doch einfach alle
irgendwo unsichbar auf der Seite ab und schiebe sie dann bei Bedarf an die gewünschte Stelle.

gute Idee,
habe ich realisiert, und die Ladekontrolle geht jetzt auch richtig.

mbG Rolf

[Kai345]

[latex]Mae  govannen![/latex]

Hallo Jürgen,

nur eine Idee:
statt den Flieger jedesmal neu (aus dem Cache) zu laden lege die 360 Bilder doch einfach alle
irgendwo unsichbar auf der Seite ab und schiebe sie dann bei Bedarf an die gewünschte Stelle.
gute Idee,
habe ich realisiert, und die Ladekontrolle geht jetzt auch richtig.

Dauert recht lange, bis da was passiert. Nicht verwunderlich bei 360 Bildern. Du solltest wirklich reduzieren, wie es schon vorgeschlagen wurde. Wenn du die vorgeschlagenen 5° für zu grob hältst, tun es evtl auch 2°,3° oder 4°-Schritte. Aber das reduziert die Bildermege natürlich trotzdem drastisch.

Nun zu deinem Quelltext:

<img id="J0" src="jets/jet0.gif" alt=" Il-28 " style="position:absolute; visibility:hidden; top:0px; left:0px; width:25px; height:25px;">  
<img id="J1" src="jets/jet1.gif" alt=" Il-28 " style="position:absolute; visibility:hidden; top:0px; left:0px; width:25px; height:25px;">  
<img id="J2" src="jets/jet2.gif" alt=" Il-28 " style="position:absolute; visibility:hidden; top:0px; left:0px; width:25px; height:25px;">  
<img id="J3" src="jets/jet3.gif" alt=" Il-28 " style="position:absolute; visibility:hidden; top:0px; left:0px; width:25px; height:25px;">  
<img id="J4" src="jets/jet4.gif" alt=" Il-28 " style="position:absolute; visibility:hidden; top:0px; left:0px; width:25px; height:25px;">  
<img id="J5" src="jets/jet5.gif" alt=" Il-28 " style="position:absolute; visibility:hidden; top:0px; left:0px; width:25px; height:25px;">  
<img id="J6" src="jets/jet6.gif" alt=" Il-28 " style="position:absolute; visibility:hidden; top:0px; left:0px; width:25px; height:25px;">  
<img id="J7" src="jets/jet7.gif" alt=" Il-28 " style="position:absolute; visibility:hidden; top:0px; left:0px; width:25px; height:25px;">

In jedem Style-Attribut steht genau das gleiche. Schmeiße die style-Attribute komplett raus, gib den Bildern eine Klasse und schreibe die Anweisungen genau ein mal im Head ins style-element! Spart jede Menge Quelltext ein.

HTML:

<img id="J0" class="jet" src="jets/jet1.gif" alt=" Il-28 ">  
<img id="J1" class="jet" src="jets/jet2.gif" alt=" Il-28 ">  
<img id="J2" class="jet" src="jets/jet3.gif" alt=" Il-28 ">  
<img id="J3" class="jet" src="jets/jet4.gif" alt=" Il-28 ">  
<img id="J4" class="jet" src="jets/jet5.gif" alt=" Il-28 ">

CSS:

img.jet {  
  position:absolute; visibility:hidden; top:0px; left:0px; width:25px; height:25px;  
}

Cü,

Kai

[ChrisB]

Hi,

Nun zu deinem Quelltext: [...]

In jedem Style-Attribut steht genau das gleiche. Schmeiße die style-Attribute komplett raus, gib den Bildern eine Klasse und schreibe die Anweisungen genau ein mal im Head ins style-element! Spart jede Menge Quelltext ein.

Da das ganze ohne JavaScript sowieso nicht "funzt" - wozu ueberhaupt alle Bilder in den HTML-Quelltext klatschen?
Da reicht doch eigentlich *ein* img-Element (ggf. selbst das dynamisch per JavaScript erzeugt), dessen Quelle dynamisch ausgetauscht wird.

MfG ChrisB

[JürgenB]

Hallo ChrisB,

Da reicht doch eigentlich *ein* img-Element (ggf. selbst das dynamisch per JavaScript erzeugt), dessen Quelle dynamisch ausgetauscht wird.

ich glaube, dass reicht nicht, da das Laden eines Bildes abgebrochen wird, wenn während des Ladens die Quelle per JS geändert wird. Und es ging ja primär um das Vorladen von den 360 Bildern.

Gruß, Jürgen

[ChrisB]

Hi,

Da reicht doch eigentlich *ein* img-Element (ggf. selbst das dynamisch per JavaScript erzeugt), dessen Quelle dynamisch ausgetauscht wird.

ich glaube, dass reicht nicht, da das Laden eines Bildes abgebrochen wird, wenn während des Ladens die Quelle per JS geändert wird. Und es ging ja primär um das Vorladen von den 360 Bildern.

Das "Preloaden" bekommt man doch auch hin, in dem man per JavaScript neue Image()-Objekte erstellt, und denen eine Quelle zuweist.
Da hier durchnummerierte Namen vorliegen, laesst sich das sogar fein in einer Schleife machen.

MfG ChrisB

[JürgenB]

Hallo ChrisB,

beim Preload von Bildern muss aber für jedes Bild ein eigenes Objekt vorliegen. In einer Schleife alle Bilder nacheinander dem "src" des gleichen Image-Objektes zuzuweisen bringt meiner Erfahrung nach nichts.

Mein Vorschlag, jedes Bild schon "auf Vorrat" anzulegen, sollte nur die Ablaufgeschwindigkeit der Animation erhöhen. Meiner Erfahrung nach geht es schneller, Objekte per display="" einzublenden, als sie neu zu erzeugen oder ihr "src" zu ändern.

Gruß, Jürgen

[Rolf]

Hallo Jürgen,

habe jetzt einige Tips realisiert.
Dabei schrumpfte die Datei von 55,7 kB auf 27,8 kB.
Die Ablaufgeschwindigkeit der Animation ist ausreichend, d.h. setTimeout() darf nicht kleiner werden.

Was noch wirklich stört, ist ein fortlaufendes Ruckeln um die Hochachse. D.h. man müßte die Punktekurve irgendwie glätten können. Eventuell so wie in Grafikprogrammen Masken geglättet werden. Aber dazu fehlt mir der richtige Algoritmus und ich weiss auch nicht, wo man sowas nachlesen kann.

mbG Rolf

[ChrisB]

Hi,

beim Preload von Bildern muss aber für jedes Bild ein eigenes Objekt vorliegen. In einer Schleife alle Bilder nacheinander dem "src" des gleichen Image-Objektes zuzuweisen bringt meiner Erfahrung nach nichts.

Klar - aber so in der Art war's ja auch gemeint:

var bilder = array();  
for(...) {  
  var bild = new Image();  
  bild.src = "...";  
  bilder[bilder.length] = bild;  
}

MfG ChrisB

[Struppi]

In jedem Style-Attribut steht genau das gleiche. Schmeiße die style-Attribute komplett raus, gib den Bildern eine Klasse und schreibe die Anweisungen genau ein mal im Head ins style-element! Spart jede Menge Quelltext ein.

HTML:

<img id="J0" class="jet" src="jets/jet1.gif" alt=" Il-28 ">

<img id="J1" class="jet" src="jets/jet2.gif" alt=" Il-28 ">
<img id="J2" class="jet" src="jets/jet3.gif" alt=" Il-28 ">
<img id="J3" class="jet" src="jets/jet4.gif" alt=" Il-28 ">
<img id="J4" class="jet" src="jets/jet5.gif" alt=" Il-28 ">

>   
> CSS:  
> ~~~css

img.jet {  

>   position:absolute; visibility:hidden; top:0px; left:0px; width:25px; height:25px;  
> }

oder:

<div style="display:none">  
<img id="J0" src="jets/jet1.gif" alt=" Il-28 ">  
<img id="J1" src="jets/jet2.gif" alt=" Il-28 ">  
<img id="J2" src="jets/jet3.gif" alt=" Il-28 ">  
<img id="J3" src="jets/jet4.gif" alt=" Il-28 ">  
<img id="J4" src="jets/jet5.gif" alt=" Il-28 "></div>

Wobei man das auch per JS ausgeben kann:

for(var i = 0; i < xx;i++)  
document.write('<img src="jets/jet' + i + '.gif" alt="">');  

Struppi.

[Gonzo]

Also habe ich eine preload-Funktion rausgesucht und eingebaut. Das Laden funktioniert
auch primstens, aber anschliessend werden die Bildchen wieder vom Server, statt aus
dem Cache gezogen.

Kann ich nicht bestätigen. Sobald die Animation läuft, tut sich nix mehr auf der Leitung. Hast du das mal mit Firebug überprüft? Hast du eventuell deinen Browser so konfiguriert, dass er jedesmal neu lädt - sowas soll's ja geben …
Nun machst du es den Browsern allerdings auch nicht gerade so bequem, wie es sein könnte. Die Antworten des Servers enthalten zwar Last-Modified und Etag und weisen somit grundsätzlich auch eine gewisse Speicherfähigkeit hin, günstiger wäre aber ein echtes Verfallsdatum (Expires).

Ich möchte davon abgesehen sehr kritisch bemerken ob für so ein kleines Bildchen, dass sich zudem recht schnell bewegt, Drehungen in 1°-Schritten etwas zu viel des Guten sind. Selbst bei direktem Vergleich muss man schon _sehr_ ordentlich hinschauen, um beispielsweise zwischen den beiden Bildern

oder

einen Unterschied festzustellen - mir persönlich fällt da als Erstes eine leichte Farbnuance auf, aber keine Drehung.

Würdest du das auf 5°- oder 10°-Schritte reduzieren und auf PNG setzen statt GIF (Echtfarben-PNGs mit Alphakanal sind kaum größer als deine GIFs, Paletten-PNGs habe ich nicht probiert), wäre die Ladezeit deutlich kürzer und es sähe zudem besser aus.

[Vinzenz Mai]

Hallo Rolf,

schön, dass Du Dein Flussmittenproblem gelöst hast.

habe eine Seite auf der in kurzen Abständen Bildchen (25 x 25 Pixel) angezeigt werden,
so dass es wie eine Animation ausschaut.

*g* Na, ohne Rolfs bitteren Ernst richtig toll ... oder so ähnlich war das doch mal zu alten Zeiten - die (Sub-)Domain kommt mir sehr bekannt vor ;-)

dem Cache gezogen. Im FF ruckelt sich das noch so hin,

bei etwa 10 Bildern pro Sekunde normal. Flüssige Bewegung erfordert ca. 25 Bilder pro Sekunde.

Hier im Wald gibt es "postbased-DSL", d.h. die IP-Pakete werden mit DHL zugestellt,
oder wie soll man 448 kBit/s sonst beschreiben ... :-(

Zu meinen 56k-Modem-Zeiten wäre ich damit mehr als glücklich gewesen, da kriegte ich selten mehr als 40 kBit/s :-)

Freundliche Grüße

Vinzenz

[Rolf]

Hallo Vinzenz,

schön, dass Du Dein Flussmittenproblem gelöst hast.

ja, nachdem ich lange genug darüber gegrübelt habe, geht es jetzt ratz-fatz.

... oder so ähnlich war das doch mal zu alten Zeiten -

ja früher ... da hatten wir ja auch noch'n Kaiser ... ;-)

die (Sub-)Domain kommt mir sehr bekannt vor ;-)

was'n für'ne Sub ... hechel ...
Falls Du "uris.de" meinst, das war mal Norberts HomePeitsch und wird von Insidern als Spielplatz verwendet, bis ihm jemand richtig Geld anbieten tut. Aber vorher wird er sie sicherlich seinen Kindern vererben müssen.

dem Cache gezogen. Im FF ruckelt sich das noch so hin,
bei etwa 10 Bildern pro Sekunde normal. Flüssige Bewegung erfordert ca. 25 Bilder pro Sekunde.

na-ja, ich meinte, dass gelegentlich ein paar Bildchen einfach ausgelassen werden.

Zu meinen 56k-Modem-Zeiten wäre ich damit mehr als glücklich gewesen, da kriegte ich selten mehr als 40 kBit/s :-)

hmm,
kennst Du noch das 300/1000-er Schnurmodem der Telemurks?
Damit kam man im Gopherspace auch um die ganze Welt ... ;-)

Habe das jetzt mal etwas optimiert. Lokal geht es richtig flüssig.
Ob es online auch flutscht, kann ich nicht sagen ... s.o. ...

mbG Rolf

[ThomasM]

Hallo Rolf,

Ach-ja, ist sicherlich auch wichtig:
Hier im Wald gibt es "postbased-DSL", d.h. die IP-Pakete werden mit DHL zugestellt,
oder wie soll man 448 kBit/s sonst beschreiben ... :-(

Dein JS-Problem habe ich jetzt nicht gelöst, aber mal die Animation auf SVG-Basis mit einem Pfad und einem Jet-Bild beschrieben:

<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>  
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">  
<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">  
  
<path id="pfad" d="M474,447 L475,441 L478,436 L478,430 L479,424 L480,418 L480,412 L480,406 L479,400 L477,395 L476,389 L474,384 L472,379 L469,374 L465,370 L462,365 L457,362 L454,357 L450,353 L445,350 L442,345 L436,344 L432,340 L427,338 L422,336 L417,334 L411,333 L405,333 L399,332 L393,331 L387,331 L381,331 L375,332 L370,334 L364,335 L359,338 L354,340 L349,343 L347,348 L342,350 L341,356 L340,362 L339,368 L337,373 L337,379 L337,385 L335,390 L333,395 L333,401 L332,407 L330,412 L329,418 L325,422 L321,426 L316,428 L311,430 L305,431 L299,432 L293,432 L287,433 L281,432 L276,429 L272,425 L269,420 L265,416 L262,411 L260,406 L258,401 L256,396 L255,390 L253,385 L252,379 L251,373 L249,368 L248,362 L246,357 L247,351 L251,347 L255,343 L259,340 L263,337 L267,334 L271,331 L276,328 L280,325 L284,322 L288,319 L293,316 L298,314 L303,311 L308,309 L313,307 L317,304 L322,301 L326,298 L328,293 L329,287 L330,281 L330,275 L328,270 L326,265 L324,260 L320,256 L317,251 L314,246 L310,242 L306,238 L301,235 L298,230 L293,228 L288,226 L283,224 L277,223 L271,224 L266,226 L262,230 L261,236 L256,238 L255,244 L252,249 L249,254 L246,259 L243,264 L239,268 L235,272 L233,277 L229,281 L227,286 L223,290 L220,295 L215,297 L210,300 L206,304 L201,306 L196,309 L190,309 L185,311 L179,312 L173,312 L167,313 L161,313 L155,313 L149,313 L143,314 L137,314 L132,316 L126,316 L120,316 L115,318 L109,318 L103,319 L 97,320 L 91,320 L 85,320 L 79,320 L 73,320 L 68,318 L 62,317 L 57,314 L 52,312 L 47,309 L 44,304 L 39,301 L 36,296 L 32,292 L 28,288 L 25,283 L 22,278 L 19,273 L 17,268 L 16,262 L 15,256 L 14,250 L 14,244 L 13,238 L 15,233 L 16,227 L 18,222 L 20,217 L 23,212 L 27,208 L 29,203 L 33,200 L 35,195 L 37,190 L 41,186 L 44,181 L 48,177 L 52,174 L 57,171 L 61,168 L 66,165 L 71,163 L 76,160 L 82,159 L 87,156 L 92,154 L 97,152 L103,152 L108,150 L114,151 L120,151 L125,154 L131,155 L134,159 L137,163 L140,168 L141,174 L141,180 L141,186 L143,191 L146,196 L149,200 L151,205 L154,210 L156,215 L159,220 L161,225 L164,229 L169,232 L175,232 L181,231 L185,228 L190,225 L194,221 L198,217 L201,212 L205,208 L207,203 L210,198 L212,193 L214,188 L214,182 L213,176 L211,171 L209,166 L207,161 L206,155 L204,150 L202,145 L199,140 L196,135 L193,130 L191,125 L187,121 L184,116 L182,111 L179,106 L175,102 L173,97 L170,92 L166,88 L163,83 L159,79 L157,74 L153,70 L150,65 L147,60 L146,54 L145,48 L146,42 L148,37 L152,33 L156,29 L160,26 L165,23 L170,21 L176,20 L182,19 L188,19 L194,19 L199,22 L205,23 L208,28 L211,32 L214,36 L217,41 L220,46 L222,51 L224,56 L224,62 L226,67 L228,72 L231,77 L234,81 L238,85 L244,86 L248,90 L253,92 L258,95 L263,97 L267,101 L272,104 L277,107 L282,110 L286,114 L291,116 L295,120 L300,123 L304,127 L309,129 L314,132 L319,134 L325,135 L330,137 L336,138 L341,140 L346,143 L351,146 L357,147 L361,151 L367,152 L372,154 L378,154 L384,154 L389,152 L395,151 L400,148 L405,145 L410,142 L415,139 L418,134 L420,129 L422,124 L424,119 L425,113 L425,107 L426,101 L425,95 L425,89 L425,83 L424,77 L422,72 L418,68 L414,64 L409,61 L405,57 L400,54 L396,50 L392,46 L388,42 L383,39 L378,36 L373,33 L369,29 L364,26 L359,23 L355,19 L351,15 L348,10 L346,5" stroke="#0CF" stroke-width="10" fill="none"/>  
  
<image x="-15" y="-12" xlink:href="jet.gif" width="25" height="25">  
  <animateMotion begin="0s" dur="38.2s" rotate="auto" fill="freeze">  
    <mpath xlink:href="#pfad"/>  
 </animateMotion>  
</image>  
  
</svg>

Die Pfad-Daten stammen aus Deinem FD-Array und jet.gif entspricht jet0.gif in der Abfolge. Funktioniert im IE+ASV und Opera 9.26 gut (vermutlich auch mit Safari -- FF 2 kann leider noch keine Animationen)[Bildansicht]. Wäre der Pfad noch etwas sauberer, würde es vermutlich auch weniger ruckeln. Die Animationszeit von 38.2 Sekunden entspricht Deinem JS-Beispiel auf meinem System.

Grüße,
Thomas