on-the-fly-Bilder cachen

on-the-fly-Bilder cachen

am 20.01.2008 11:06:04 von petsch

Moin.

In einer Tabelle werden beim mouseover Hintergrund-Farbverläufe
eingeblendet. Weil sich die Höhe der Zeilen ändern kann, werden die
Bilder in Abhängigkeit von der Höhe dynamisch erzeugt. Etwa so:

height =3D tr.offsetHeight;
tr.style.background =3D "url(bg.php?farbe=3Dblau&hoehe=3D" + height + ")
repeat-x";

Das klappt mit FF2/IE6/IE7. Aber IE scheint die Bilder nicht zu
cachen - trotz gleicher Höhe und Farbe. Es gibt eine Verzögerung beim
mouseover und im Tab-Register taucht auf immer kurz dieser "Nachlade-
Kringel" auf. Ich habe in dem Script 'bg.php' auch schon einen
Filenamen vergeben; hat aber nichts gebracht:

header("Content-type: image/png");
header("Content-Disposition: filename=3Dbg.$farbe.$height.png");

Irgendwelche Ideen?

Vielen Dank im Voraus.

Peter

Re: on-the-fly-Bilder cachen

am 20.01.2008 13:32:17 von unknown

Post removed (X-No-Archive: yes)

Re: on-the-fly-Bilder cachen

am 20.01.2008 13:43:15 von Stefan David

Peter Schleif wrote:
> Moin.
>
> In einer Tabelle werden beim mouseover Hintergrund-Farbverläufe
> eingeblendet. Weil sich die Höhe der Zeilen ändern kann, wer=
den die
> Bilder in Abhängigkeit von der Höhe dynamisch erzeugt. Etwa =
so:
>
> height =3D tr.offsetHeight;
> tr.style.background =3D "url(bg.php?farbe=3Dblau&hoehe=3D" + height + =
")
> repeat-x";
>
> Das klappt mit FF2/IE6/IE7. Aber IE scheint die Bilder nicht zu
> cachen - trotz gleicher Höhe und Farbe. Es gibt eine Verzög=
erung beim
> mouseover und im Tab-Register taucht auf immer kurz dieser "Nachlade-
> Kringel" auf. Ich habe in dem Script 'bg.php' auch schon einen
> Filenamen vergeben; hat aber nichts gebracht:
>
> header("Content-type: image/png");
> header("Content-Disposition: filename=3Dbg.$farbe.$height.png");
>
> Irgendwelche Ideen?
>
> Vielen Dank im Voraus.
>
> Peter

Erzeuge *eine* Grafik, in der die verschiedenen Höhen unter- bzw.=20
nebeneinander angelegt sind â€=93 je nach Ausrichtung des Verlaufs. D=
ie=20
Anzahl an möglichen Hintergrundhöhen wird ja wohl endlich sein.=
Diese=20
eine Grafik positionierst du dann je nach (erwarteter) Höhe der=20
Tabellenzelle per CSS.

Bei dieser Vorgehensweise muss die Grafik nur einmal geladen werden und=20
das Nachladen beim Hovern entfällt unabhängig von Cache-Einstel=
lungen.=20
Das verstehen selbst die alten IEs.

Mehr dazu findest du unter dem Suchbegriff "css-sprites" oder hier[1].

Weil das hier allerdings ziemlich OT ist, gibt es mal einen x-post und=20
followup-to d.c.i.w.a.m. Deshalb auch das Fullquote.

Grüße

Der Stefan

[1] http://www.webkrauts.de/2007/10/20/hovereffekte-mit-css-spri tes/

--=20
"And all those exclamation marks, you notice? Five? A sure sign of
someone who wears his underpants on his head."
(Terry Pratchett in "Maskerade")=

http://weblog.ononlinework.de/

Re: on-the-fly-Bilder cachen

am 20.01.2008 14:37:23 von petsch

On 20 Jan., 13:32, Michael Meier wrote:
>
> Damit der Browser so ein Bild wirklich cached, solltest du als Header
> noch zusätzlich die Größe des Bildes in Bytes mitsenden.
>
> Ein Expires-Header, der dem Browser mitteilt, wie lange das Bild im
> Cache gehalten werden kann ohne zu veraltern (zB 1 Tag) ist sicher auch
> nicht von Nachteil.


Danke. Werde ich beides nachher ausprobieren.

Peter

Re: on-the-fly-Bilder cachen

am 20.01.2008 14:39:45 von petsch

On 20 Jan., 13:43, Stefan David wrote:
>
> Erzeuge *eine* Grafik, in der die verschiedenen Höhen unter- bzw.
> nebeneinander angelegt sind - je nach Ausrichtung des Verlaufs. Die
> Anzahl an möglichen Hintergrundhöhen wird ja wohl endlich sein.


Endlich wahrscheinlich schon - aber ...

Der User kann unterschiedliche Schriftgrößen einstellen und
unterschiedliche Themes wählen (und damit auch Farben). Außerdem kann
die Zeilenhöhe durch automatischen Umbruch mehrfach wachsen. Und
schließlich scheint der IE padding und border auf die Zellen-Höhe
aufzuschlagen, während sie beim FF nach innen zu wachsen scheinen.
Ohne Browserweiche also nochmal zwei verschiedene Höhen:

2x - IE/FF
3x - font-size
2x - Umbruch (therotisch sogar noch mehr)
4x - Themes (bis jetzt)

Macht also schon jetzt 48 verschiedene Hintergründe. Nichts gegen
Photoshop - aber ich arbeite halt lieber mit php. Und das Script
arbeitet ja auch gut. Bis auf das Cachen halt.

Deswegen auch die Missachtung deines f'ups. Trotzdem vielen Dank für
die Anregung.

Peter

Re: on-the-fly-Bilder cachen

am 20.01.2008 15:12:05 von Stefan David

Peter Schleif wrote:
> Der User kann unterschiedliche Schriftgrößen einstellen und
> unterschiedliche Themes wählen (und damit auch Farben). Außer=
dem kann
> die Zeilenhöhe durch automatischen Umbruch mehrfach wachsen. Und
> schließlich scheint der IE padding und border auf die Zellen-Hö=
he
> aufzuschlagen, während sie beim FF nach innen zu wachsen scheinen.=

> Ohne Browserweiche also nochmal zwei verschiedene Höhen:
>=20
> 2x - IE/FF
> 3x - font-size
> 2x - Umbruch (therotisch sogar noch mehr)
> 4x - Themes (bis jetzt)

Was ich nicht verstehe: Woher weißt du denn, welche Höhe die Ze=
llen auf=20
dem Bildschirm des Users haben? Dir ist doch sicher bewusst, dass du=20
darauf so gut wie keinen Einfluss hast, oder?

Muss denn der gesamte Verlauf immer vom Anfangs- bis zum Endpunkt=20
sichtbar sein? Reicht nicht ein Verlauf, der sich nach der=20
(angenommenen) Standardhöhe richtet? Kleinere Zellen zeigen dann ebe=
n=20
nicht den ganzen Verlauf und größere enden nach z. B. 40 Pixeln=
in einer=20
Wiederholung der letzten Farbe. Oder du definierst diese Farbe als=20
Hintergrund und lässt die Hintergrundgrafik transparent auslaufen.

Bei 4 Themes ergibt das dann genau 4 Hintergründe â€=93 und die =
sollten sich=20
problemlos in einer Datei unterbringen lassen.

Grüße

Der Stefan

--=20
"Klar weiß ich, dass ich den Lack mit einem Tuch polieren kann, wie =
alle
Anderen das machen, ich möchte aber den Hammer benutzen. Wie geht da=
s?"=20
http://weblog.ononlinework.de/

Re: on-the-fly-Bilder cachen

am 20.01.2008 15:38:46 von petsch

On 20 Jan., 15:12, Stefan David wrote:
>
> Was ich nicht verstehe: Woher weißt du denn, welche Höhe die Zellen au=
f
> dem Bildschirm des Users haben?

Durch JS. Ob man sich drauf verlassen sollte, dass JS eingeschaltet
ist, wäre jetzt vermutlich wirklich OT. Also:

function mouseover(tr)
{
tr.style.color =3D "#FFFFFF";
tr.style.background =3D "url(bg.php?farbe=3Dblau&height=3D" +
tr.offsetHeight + ") repeat-x";
}

>
> Muss denn der gesamte Verlauf immer vom Anfangs- bis zum Endpunkt
> sichtbar sein?

Ja.

>
> Bei 4 Themes ergibt das dann genau 4 Hintergründe - und die sollten sich=

> problemlos in einer Datei unterbringen lassen.

Die Anzahl der Dateien ist nicht das Problem; sondern die Arbeit mit
Photoshop (o.ä) auf die ich nicht gerade scharf bin. Wie Du ja selber
sagst, kann ich die Höhe der Zeile beim User nicht vorhersehen oder
gar festlegen. Um also für möglichst viele Höhen gerüstet zu sein,
müsste ich ja letztlich alle Höhen zwischen ca. 20 und 50 Pixel
entwerfen und das in allen Theme-Farben. Und auch dann wäre ich für
mögliche Extremfälle immer noch nicht gerüstet.

In der php-Klasse muss ich für jede neue Farbe nur 8 RGB-Werte
angeben. Den Rest macht dann die Methode.

Peter

Re: on-the-fly-Bilder cachen

am 24.01.2008 18:59:53 von petsch

On 20 Jan., 13:32, Michael Meier wrote:
> Peter Schleif schrieb:
>
> > header("Content-type: image/png");
> > header("Content-Disposition: filename=3Dbg.$farbe.$height.png");
>
> Hallo,
>
> das ist schon mal ganz gut.
>
> Damit der Browser so ein Bild wirklich cached, solltest du als Header
> noch zusätzlich die Größe des Bildes in Bytes mitsenden.

Hallo Michael. Bitte entschuldige die Verzögerung. Konnte mich leider
erst heute wieder damit beschäftigen.

Mit der Ausgabe der Dateigröße habe ich ein Problem:

Die Größe kenne ich ja erst, wenn ich mit imagepng() das Format
festgelegt habe. Dabei wird aber das Bild ja schon ausgegeben und ich
kann keinen Header mehr schreiben.

Alternativ könnte ich bei imagepng() einen Filenamen angeben und ein
TEMP-File anlegen, aber genau das möchte ich durch die direkte Ausgabe
an das Style-Sheet ja verhindern. Wenn ich doch erst in einem TMEP-
Ordner ein File erzeuge, kann ich auch gleich den Link zu diesem File
in das Style-Sheet schreiben. Aber das wollte ich ja eben nicht.

Peter