Zufallsheader Augen- und Serverschonend | 28. Januar 2006 um 13:23 Uhr / Programming Webdesign /

Eingestellt am 28. Januar 2006 um 13:23 Uhr » Programming Webdesign

Gerade stand ich vor der Aufgabe ein Headerbild per Zufall in eine Seite einzubinden. Ich hätte das auch mittels PHP auf dem Server machen können, das würde aber bedeuten dass sich die Dateien jedes mal ändern und somit das caching ziemlich durcheinander kommt, deshalb habe ich mich für eine JavaScript Lösung entschieden. Es galt dabei aber auch ein paar Probleme zu bewältigen, das größte war die änderung des headers so früh wie möglich zu machen, damit die Seite nicht flackert. Gleichzeitig sollte so wenig code wie möglich dafür verwendet werden.

Der Eventhandler onload fiel damit gleich weg, da dieser sogar auf das fertigladen aller bilder wartet und das dauert einfach zu lange. Ich habe mich also entschieden eine funktion gleich nachdem der relevante code geladen wurde aufzurufen. Die Funktion in eine externe Datei auszulagern war auch nicht sinnvoll, da dann nicht sichergestellt werden kann ob diese schon geladen ist, wenn sie aufgerufen wird. Blieb also nur noch die Notation in der Datei selbst.

Wenn ich sie im <head> Bereich definiert hätte, dann würde alles wunderbar funktionieren, aber ich hätte unnötig zwei mal <script type="text/javascript"><script> drinn, und ich wollte ja Code sparen, da das ganze jedes mal mit heruntergeladen werden muss. Naja lange Rede kurzer Sinn, die Lösung sah für mich dann so aus:

HTML

<div id="head">
  <!-- hier kamen noch andere Sachen -->
</div>
<script type="text/javascript">
  ( function () {
    var c = ['a','b','c','d','e','f','g','h','i','j','k'];
    document.getElementById('head').className =
      c[Math.round(Math.random()*c.length)];
  } ) ()
</script>

CSS

#head {
  background: url(default.jpg) top left no-repeat white;
  /* hier noch alle anderen Styles für #head */
}
#head.a { background: url(1.jpg) top left no-repeat brown; }
#head.b { background: url(2.jpg) top right no-repeat yellow; }
#head.c { background: url(3.jpg) top center repeat-x blue; }
/* und so weiter */

[update:] Ich habe das new function() Konstrukt welches an dieser Stelle falsch war, da es keine anonyme Funktion deklariert hat ersetzt.

Ich definiere und rufe also diese anonyme Funktion sofort auf, wenn sie geladen ist, dadurch, dass sie im Quellcode genau unter dem head DIV ist, wird immer sicher gestellt dass dieser schon geladen ist. Das schöne dabei ist, dass noch bevor der Browser anfängt zu rendern die Klasse für das DIV schon geändert wurde und nunmehr das zufällige Bild geladen wird, ohne vorher das default Bild anzuzeigen. Schöner Nebeneffekt der anonymen Funktion ist auch, dass sie nie in anderen Scripten Unhelt anrichten kann, weil sie den Namespace verunreinigt, sie hat ja keinen Namen. Grundsätzlich könnte man so per Zufall völlig verschiedene Header produzieren, die man mit CSS unterschiedlich stylt.

Der Nachteil eines solchen Vorgehens ist offensichtlich, man schreibt extra Markup nur um das aussehen zu verändern, bzw. um ein Verhalten zu produzieren. Eigentlich sollte man ja die Trennung von strukturiertem Inhalt (Text mit Markup) und der Präsentationslogik (CSS) und Verhalten (JavaScript) nach dem drei Schichten Modell nutzen, manchmal aber ist es sinnvoller da ein bischen zu schummeln ;-). Vor allem wenn das Design für die ganze seite über eine einzelne Template Datei erstellt wird.

Kommentare

Die Kommentare sind für diesen Eintrag geschlossen.