# Seite aktualisieren ohne Ruckler



## Drade (5. November 2014)

Liebe Gemeinde,

gibt es eine Möglichkeit eine Seite in Intervallen aktualisieren zu lassen ohne dass man diese Aktualisierung wahrnimmt?
Selbst bei gleich bleibendem Inhalt merkt man immer wie sich die Seite neu aufbaut.

Der Hintergrund ist folgender:
Es soll eine Statusanzeige einiger in MySQL abgelegter Werte erstellt werden. Es sieht nur nervig aus wenn alle x Sekunden das Bild kurz flackert.

Vielen Dank
Drade


----------



## SpiceLab (5. November 2014)

Meines Wissens gibt's dafür keine Möglichkeit. Das "Reload"-Verhalten ist da auch von Browser zu Browser unterschiedlich.


----------



## Drade (5. November 2014)

Hi SpiceLab,

danke für die Antwort.

Gibt es denn eine andere Technik die eine "flüssige" Obeflächengestaltung ermöglicht?


----------



## SpiceLab (5. November 2014)

Naja, grundsätzlich stünde AJAX zur Verfügung, um Inhalte nachträglich in das Dokument  zu laden, ohne es hierbei vollständig zu aktualisieren.


----------



## Alice (5. November 2014)

Wie kann ich mir diese "Ruckler" denn vorstellen?

Ich frage weil ich so etwas nicht kenne.

http://demo.mysamplecode.com/JQuery/pages/reloadPageFiveSeconds.jsp


----------



## SpiceLab (5. November 2014)

Alice hat gesagt.:


> Wie kann ich mir diese "Ruckler" denn vorstellen?
> 
> Ich frage weil ich so etwas nicht kenne.


Die Umschreibung findet sich im letzten Absatz:


Drade hat gesagt.:


> Es sieht nur nervig aus wenn alle x Sekunden das Bild kurz flackert.


Und das geschieht ebenfalls mit deinem empfohlenen Beispiel in diversen Browsern, wenn darin ein Bild-Element enthalten ist.


----------



## Alice (5. November 2014)

Also bei mir passiert das nicht.


----------



## SpiceLab (5. November 2014)

Alice hat gesagt.:


> Also bei mir passiert das nicht.


Hast du das lokal mit einem eingebundenen <img>-Element überprüft? Wenn ja, mit welchem Browser?

In IE, Google-Chrome und Opera registriere ich alle 5 Sekunden das "Bild-Flackern".


----------



## Alice (5. November 2014)

Ich verwende den Firefox 33.0.2. Bei mir ändern sich nur Werte wie z.B. die dargestellte Uhrzeit. Ein "Flackern" oder "Ruckeln" ist nicht vorhanden. Vielleicht liegt es an der Hardware?

Edit:

Der Code:

```
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
<script src="http://demo.mysamplecode.com/resources/scripts/mysamplecode.js" type="text/javascript"></script>
<script type="text/javascript">
        $(document).ready(function() {
            setInterval("location.reload();", 5000);
            $("#someInfo").html("Time is " + new Date());
        });    
</script>
```

Diesen Code habe ich (nur URL angepasst) in mein "Header-Template" eingebaut. Die Seite wird nun alle 5 Sekunden "reloadet" und das ohne jegliche Probleme.

Ich sehe nur zwei Dinge:
1.) Oben im Browser-Tab erschein kurz eine "Reload-Grafik".
2.) Sachen wie Uhrzeit/Counter usw. werden - natürlich - aktuallisiert.


----------



## SpiceLab (5. November 2014)

Alice hat gesagt.:


> Ich verwende den Firefox 33.0.2. Bei mir ändern sich nur Werte wie z.B. die dargestellte Uhrzeit. Ein "Flackern" oder "Ruckeln" ist nicht vorhanden. Vielleicht liegt es an der Hardware?


Nö, nur am Browser.


SpiceLab hat gesagt.:


> In IE, Google-Chrome und Opera registriere ich alle 5 Sekunden das "Bild-Flackern".


Dies habe ich, wie gesagt, lokal mit einem eingebundenen Bild-Element überprüft.


----------



## Alice (5. November 2014)

Hab es nun auch im IE (11) ausprobiert. Der kann sich den Punkt wo ich gerade bin nicht merken und springt ganz nach oben. Aber auch hier entsteht kein "Bild-Flackern" sondern ein neuladen (holen) des Quelltextes. Als würde man das Licht aus- und wieder einschalten. Mit Opera (25) der selbe Effekt. Man kann es also "Flacker" nennen. Wobei es das mit dem Licht besser verdeutlicht.

In Firefox gibt es diesen Effekt nicht.


----------



## SpiceLab (5. November 2014)

Alice hat gesagt.:


> Hab es nun auch im IE (11) ausprobiert. Der kann sich den Punkt wo ich gerade bin nicht merken und springt ganz nach oben. Aber auch hier entsteht kein "Bild-Flackern" sondern ein neuladen (holen) des Quelltextes. Als würde man das Licht aus- und wieder einschalten. Mit Opera (25) der selbe Effekt. Man kann es also "Flacker" nennen. Wobei es das mit dem Licht besser verdeutlicht.
> 
> In Firefox gibt es diesen Effekt nicht.


Nenn' es flackern, ruckeln, oder sonst wie. Fakt ist, dass die Aktualisierung (abgesehen von Firefox) "sichtbar" vonstatten geht.


----------



## Alice (5. November 2014)

Im IE und Opera (Chrome habe ich nicht) trifft das zu.


----------



## SpiceLab (5. November 2014)

Na, dann sind wir uns ja einig


----------



## ComFreek (5. November 2014)

Alice hat gesagt.:


> Ich verwende den Firefox 33.0.2.


Bei mir seh ich im selben Firefox auch das Ruckeln.



Alice hat gesagt.:


> setInterval("location.reload();", 5000);


Du solltest keine Strings an setInterval() übergeben. Siehe hierzu MDN/setInterval.
Folgendes sollte funktionieren (ich hoffe mal, dass location.reload nicht den Funktionskontext auf irgendeine Weise nutzt):
	
	
	



```
setInterval(location.reload, 5000);
```


----------



## SpiceLab (5. November 2014)

ComFreek hat gesagt.:


> Bei mir seh ich im selben Firefox auch das Ruckeln.


Hmm, Ausnahmen bestätigen die Regel


----------



## Alice (5. November 2014)

Ich habe den Code 1:1 aus der Webseite übernommen und nur den Pfad zur Webseite angepasst. Kein Flackern.

Da es ein Browser-Problem zu sein scheint, würde ich die Funktion aus ästhetischen Gründen vergessen.

PS: Ich habe mir sogar extra die User-Galerie angeschaut auf meiner Webseite. Voll mit Bildern... Der FF vergisst übrigens auch nicht "seine Position".


----------



## ComFreek (5. November 2014)

Das ist kein Browser-Problem, das ist einfach so. Genau wie deine Pupillen Zeit brauchen, sich an neue Lichtverhältnisse anzupassen, braucht dies auch der Computer.

Deswegen nutze AJAX.


----------



## SpiceLab (5. November 2014)

Siehe dazu meinen zweiten Post 


SpiceLab hat gesagt.:


> Naja, grundsätzlich stünde AJAX zur Verfügung, um Inhalte nachträglich in das Dokument  zu laden, ohne es hierbei vollständig zu aktualisieren.


----------



## Alice (5. November 2014)

Abgesehen von AJAX und Co. muss es einen Grund haben warum es mit meinem Firefox NICHT flackert.

Zusammenfassung:
Internet Explorer -> Flackern + Springt nach oben
Opera -> Flackern + Springt nicht
Firefox -> Kein Flackern + Springt nicht


----------



## Drade (5. November 2014)

Hallo,

also schon mal danke für die Antworten.

Also im JQuery Beispiel sehe ich solang keine Bilder vorhanden sind auch kein flackern, sobald Bilder integriert sind schon.

Zur jetzigen Situation:
Auf einem RaspberryPi ist ein 433Mhz Transciever zur Steuerung des Hauses verbaut. Per Smartphone werden über das Web diverse Stromkreise angesteuert.
Auf einer Visualisierung (mit Bildern wie Symbole, Statusbilder etc.) werden die verschiedenen Zustände wie Sollwert der Heizung, Schaltzustände etc. dargestellt.

Zum Aufruf der Visualisierung wird lediglich in den Chrome Browser (Vollbildmodus) gebootet und die Visualisierung aufgerufen.
Beim aktualisieren der Visualisierung sollte daher aus optischen Gründen das flackern vermieden werden.

Kenn jemand ein entsprechendes Beispiel zur Realisierung  in AJAX?


----------



## SpiceLab (5. November 2014)

Hmm, da müsste ich jetzt auf die Schnelle selbst googeln 

mysql ajax


----------



## Drade (5. November 2014)

Ok, dann bedanke ich mich schon mal für die Hilfe und werde mich näher gehend mit der Thematik beschäftigen.


----------

