201226Feb

LazyReload: Browserfenster bei Bedarf neu laden

Das Aktualisieren des Browserfensters gehört zum Alltag jedes Webentwicklers und der Vorgang kann mit der Zeit lästig werden. Gerade wenn mit zwei Monitoren gearbeitet wird und kleinere Änderungen schnell begutachtet werden wollen, muss dieser zusätzliche Schritt eigentlich nicht sein. Ein automatisiertes Neuladen des Fensters kann hier Zeit sparen und für diese Problemstellung gibt es bereits Lösungen, die als Plugin verwendet werden können. Das Tool XRefresh (jetzt LiveReload) dürfte hier die erste Wahl sein. Allerdings kann auch diese Lösung nicht alle Fälle abdecken und die Installation eines Plugins ist zudem nicht immer gewünscht.
Daher habe ich ein kleines Skript entwickelt, mit dem das Browserfenster automatisch neu geladen wird, sobald sich die entsprechende Datei (oder Dateien) geändert hat. LazyReload steht bei GitHub zur Verfügung und besteht aus einer JavaScript-Datei.

LazyReload - Browserfenster bei Bedarf neu laden

Die Anleitung zur Verwendung findet sich auf der Readme-Seite. Grundsätzlich muss die JavaScript-Datei in die Hauptdatei eingebunden werden und anschließend können die zu überwachenden Dateien in ein Array übergeben werden. Der Aufruf von LazyReload könnte dann etwa so aussehen:

  • var LazyReloader = new LazyReload(500, "content");
    LazyReloader.add("index.html");
    LazyReloader.add("styles.css");
    LazyReloader.activate();

Die Hauptfunktion "LazyReload()" kann mit 3 optionalen Parametern aufgerufen werden, wobei hier ein Array, das Zeit-Intervall und die Methode der Überprüfung angegeben werden können. Im obigen Beispiel wird das Intervall auf 500 Millisekunden und die Überprüfungsmethode auf "content" eingestellt. Dadurch wird der komplette Inhalt der Dateien mit dem letzten Stand verglichen.
LazyReload basiert auf simplen Ajax-Requests und funktioniert in allen modernen Browsern (Internet Explorer 8+). Inzwischen habe ich auch mein HoverCrossfade-Plugin bei GitHub veröffentlicht, mit dem unter Anderem die Überblendungen auf der rechten Seite umgesetzt wurden. Das jQuery-Plugin erzeugt also einen Überblendungseffekt zwischen zwei Grafiken, die per "background-position" definiert sind. Details finden sich wieder bei GitHub.