Hintergrundbild lädt mit Seitenaktualisierung neu

  • Hallo an alle,


    baue mir gerade eine Website auf. Bin relativ neu und habe das Problem, dass das Hintergrundbild bei jeder Aktualisierung neu lädt. Habe ich z.B. eine automatische Aktualisierung von 1 Sekunde, sieht es so aus, als würde ich jede Sekunde geblitzt werden.

    Kann man da irgendwas machen?


    Vielen Dank vorab!

    Grüße

  • <link rel="stylesheet" href="Test.css">

    <meta http-equiv="refresh" content="1">

    Hiermit füge ich in der HTML-Datei die css-Datei ein und setze die Aktualisierung auf 1 Sekunde.


    body {background-image: url("cloud7.jpg"); background-position: 0% 0%; background-repeat: no-repeat; background-size: cover; margin-top:1.0cm; margin-left:0.5cm;}

    Das ist der Auszug aus der CSS.


    Bin komplett neu in dem Thema..

  • erstelle einen Webserver mit der Variablen angezeigt werden. Diese verändern sich durchgängig, deshalb sollte die Seite auch durchgängig aktualisiert werden.

    Wie könnte man das umsetzen?

  • Ich erinnere mich, das war diese Sache wo Variablen von einer SPS eingefügt wurden. Worauf ich hinaus wollte ist, die betr. Abschnitte mit Ajax zu aktualisieren, dann würde der Rest der Seite nicht neu geladen und das Flackern/Blitzen unterbleibt. Ich nehme an, die Seite wird mit einem normalen Browser angeschaut, so dass Javascript und Ajax zur Verfügung stehen?

  • Ich fürchte, in dem Fall kannst Du den Pelz des Bären nicht waschen, ohne ihn nass zu machen :)

    Gib der Tabellenzelle eine ID:

    <td id="td-status"><img id="statusanzeige"></td>

    Und erzeuge eine kleine HTML-Datei mit dem img-Tag:

    (Weiß nicht genau, ob Du da noch irgend etwas einbinden musst, damit das mit der PLC-Variablen funktioniert.)

    Dann die Tabellenzelle mit fetch einbinden:

    Code
            fetch('td-status.html')
            .then(res => {
                return res.text();
            }).then(res => {
                document.getElementById('td-status').innerHTML = res;
            });
  • PS: Ich habe ganz vergessen, dass Du das ja zyklisch aktualisieren musst:

    Code
        function getStatus() {
            fetch('td-status.html')
            .then(res => {
                return res.text();
            }).then(res => {
                document.getElementById('td-status').innerHTML = res;
            });
        }
        getStatus();
        setInterval(getStatus, 1000);
  • lässt sich das auch nur auf das Hintergrundbild anwenden?

    das zeige ich ja so an:

    Code
    <img src="Test.png" width="400" height="120" alt="Logo">

    was genau müsste in die seperate Html-Datei und wie würde ich das Bild in meiner Hauptdatei aufrufen?

  • PS: Jedenfalls wenn Du mit Hintergrundbild das aus deinem Posting #3 meinst:

    body {background-image: url("cloud7.jpg"); background-position: 0% 0%; background-repeat: no-repeat; background-size: cover; margin-top:1.0cm; margin-left:0.5cm;}

  • Ja sorry hab etwas vertauscht. Habe das Hintergrundbild und ein Bild im Header der Html Datei. Beide sollen nicht aktualisiert werden, da sie sich eh nicht ändern und ein flackern erzeugen. Das Bild aus dem header bräuchte ich aber nicht unbedingt.

    Wenn ich das Hintergrundbild flackern wegbekomme wäre ich schon sehr zufrieden:

    Code
    body {background-image: url("cloud7.jpg"); background-position: 0% 0%; background-repeat: no-repeat; background-size: cover; margin-top:1.0cm; margin-left:0.5cm;}
  • In script-Tags setzen und am Ende des Body, vor dem schließenden </body>, einfügen:

    Und nicht vergessen, der Tabellenzelle die ID "td-status" zu geben.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!