Extension dload

Lädt Seiteninhalte verzögert nach, damit der Seitenbesucher schnellstmöglich etwas sieht.

Die Ticker von BUOA.DE und „NoSi bloggt“ werden geladen … Kein Javascript? bitte Bitte hier klicken!

GitHub-Repository:

dload-Extension

Auf meiner Homepage blende ich zwei Ticker ein, die sich von „NoSi bloggt“ und hier von „BUOA!“ die letzten drei aktuellen Beiträge holen. Diese externen Zugriffe können aus verschiedenen Gründen „dauern“. Weil der Browser auf den Inhalt wartet, bevor die Seite angezeigt wird, kann der Zugriff auf die Startseite extrem langsam erscheinen. Woher soll der Besucher wissen, dass eigentlich alle Daten schon da sind, nur sein Browser noch keine Lust hat, sie anzuzeigen?

Mit der dload-Erweiterung wird dieses Dilemma entschärft – zumindest, wenn der Browser Javascript zulässt. Denn damit lässt sich die Verzögerung der Seitenanzeige umgehen.

Das funktioniert – grob zusammengefasst – so:

  • Die Webseite wird geladen, inklusive einem Abschnitt, in dem später die Ticker geladen werden.
  • Ist die Seite vollständig geladen, wird nach abgeschlossenem Ladevorgang von einem Javascript der Befehl abgefeuert, eine Seite in den vorgesehen Abschnitt zu laden. Dabei wird der erforderliche Platz automatisch geschaffen.

Damit das Script nur auf Seiten eingefügt wird, auf denen etwas nachgeladen werden soll, muss im Kopf der entsprechenden Seite ein Schalter eingefügt werden:

---
title: …
…
dload: ja | yes | 1 | (eigentlich egal was drin steht)
…
---

Letztendlich wird lediglich nach dem Eintrag dload: gesucht. Ist er vorhanden, wird das erforderliche Script eingefügt. Nur dann. Der eigentliche Eintrag ist in der Grundfunktion ziemlich schlicht:

 [dload Pfad/dateiname]

Das fügt – sobald alle Inhalte verfügbar sind – die Seite so ein, wie sie angezeigt wird, wenn sie direkt im Browser geöffnet wird. Auf das Warten darauf kann ein Hinweis erfolgen:

 [dload "Pfad/Datei"  news "<span class="blink"><b>Aktuelle Meldungen werden geladen …</b></span> <sub>No Javascript? Please <a href="/Pfad/Datei2">Bitte hier klicken</a>!<sub>"]

Damit lässt sich gleichzeitig eine Option für alle anbieten, bei denen – warum auch immer – kein Javascript funktioniert. Die Parameterliste sieht so aus:

 [dload Datei Stil Hinweis]

Der optionale Stil wird um die Einfügung gelegt, damit ggf. eine angepasste Formatierung für die Einbettung möglich ist. Der Hinweis erlaubt HTML-Codierung.

Für einen Ticker ist es zweckmäßig, zwei Seiten anzulegen. Die Erste enthält lediglich eine Rumpfdatei, die eingebettet wird, wenn Javascript funktioniert. Die Zweite hat einen Kopf und Fußteil, damit eine Navigation verfügbar ist, falls bei fehlendem Javascript eine Anzeige per Anklicken erfolgt.

Zurück zu Extension-Übersicht