Ändern Körper Klassen vor dem ersten malen

Dies ist eine Totale und ich vermute, was ich versuche zu tun ist letztlich unmöglich.Ändern Körper Klassen vor dem ersten malen

Ich versuche, einen dunklen/hellen Modusschalter auf meiner Website zu implementieren. Die Sache ist, dass die Site nur statische Dateien auf S3 ist und als solche gibt es keine Server-Seite, die ich im Spiel kontrollieren kann.

Das Problem, das ich habe, ist das Laden des richtigen Themas, wenn eine neue Seite geladen wird, weil der Wert im lokalen Speicher gespeichert wird, muss ich es holen und den Wert beim Laden der Seite ändern.

Mein aktueller Ansatz nutzt eine Anfangsklasse hidden auf den Körper, die zu light oder dark wenn DOMContentLoaded Feuer geändert wird. Leider verursacht dies immer noch eine Farbe, bevor die Klasse geändert wird. Indem ich das JS in setzte, konnte ich das Problem in Safari und Chrome, aber nicht Firefox umgehen.

Das Problem mit der anfänglichen Farbe ist, dass es ein extrem störendes Blinken verursacht, besonders wenn mehr Dunkelheit aktiviert ist, da der Bildschirm schnell von weiß zu schwarz wechselt.

Also meine Frage ist, ob es möglich ist, die Klassen von body vor DOMContentLoaded Feuer zu ändern?

Dank

Quelle

2016-05-09 Hugo Tunius

Dies kann nicht vollständig tun, was Sie wollen, aber haben Sie versucht, das dunkle Thema als Standard festlegen? Auf diese Weise können Sie den weißen Blitz umgehen. –

Ich möchte nicht das dunkle Thema als Standard verwenden. Ich habe versucht, die anfängliche Körperfarbe auf einen Wert nahe der Mitte der dunklen Hintergrundfarbe und der hellen Hintergrundfarbe einzustellen, aber letztendlich wird es immer einen Fall geben, der das blinkende Problem hat. –

Anstatt die Klasse zum Rumpf hinzuzufügen, versuchen Sie, die Themenklasse ('.dark',' .light') auf das '' Tag mit JS direkt in Ihrem' ' Abschnitt anzuwenden. Dieses Element ist bereits zugänglich, anders als der Körper, der mehr Zeit zum Laden benötigt (verursacht einen Blitz). Probieren Sie es aus: [Pastebin] (http://pastebin.com/embed_iframe/f3NW1rFL). Diese Seite wird mit einer Verzögerung von 1 Sekunde geladen, um langsames Laden zu simulieren, den Bildschirm schwarz zu schalten und jede Sekunde zu aktualisieren. Ich sehe in keinem Browser Flash. – blex

Statt die Klasse an den Körper hinzufügen, können Sie es mit dem Element <html> hinzufügen, aus dem <head> Abschnitt.

Auf diese Weise wird die Klasse angewendet, bevor der Körper geladen wird. Beispielcode:

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8"> 
    <title>Test</title> 
    <style> 
     html.dark body{background:black;} 
    </style> 
    <script> 
     document.getElementsByTagName('html')[0].setAttribute('class', 'dark'); 
    </script> 
</head> 
<body> 

</body> 
</html>

Quelle

2016-05-09 23:07:09 blex

Danke :) FYI document.documentElement funktioniert auch –

Ändern Körper Klassen vor dem ersten malen

Antwort

Verwandte Themen