Heim >Web-Frontend >CSS-Tutorial >Wie kann das Flackern im Dunkelmodus beim Neuladen der Seite vermieden werden?
Wie kann das Flackern im Dunkelmodus beim Neuladen der Seite vermieden werden?
- Mary-Kate OlsenOriginal
- 2024-11-03 10:40:03421Durchsuche
Der dunkle Modus flackert beim Neuladen weiß: Das Rendern wird für einen nahtlosen Übergang blockiert
Das Problem des Flackerns im dunklen Modus beim Neuladen der Seite tritt auf, wenn lokaler Speicher verwendet wird um Benutzereinstellungen beizubehalten. Um dieses Problem zu beheben, wird empfohlen, zunächst das Seitenrendering zu blockieren und dann die Designeinstellungen anzuwenden.
Lösung: Seitenrendering blockieren
Implementieren Sie dieses kleine Skript innerhalb des Anpassung in index.js In der index.js-Datei das Umschalten des Themas behandeln: Dieser Code aktualisiert das Design, wenn das Kontrollkästchen aktiviert wird. Alternativ können Sie dieses Skript in einer separaten JS-Datei platzieren. Durch die Implementierung dieser Änderungen wird das Rendern der Seite zunächst blockiert, sodass die Designeinstellungen umgehend festgelegt werden können. Dadurch wird der weiße Flackereffekt eliminiert und ein nahtloser Übergang zwischen hellem und dunklem Modus ermöglicht. Das obige ist der detaillierte Inhalt vonWie kann das Flackern im Dunkelmodus beim Neuladen der Seite vermieden werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!<code class="html"><script>
// Set this in <HEAD> top before any other tag.
const setTheme = (theme) => {
theme ??= localStorage.theme || "light";
document.documentElement.dataset.theme = theme;
localStorage.theme = theme;
};
setTheme();
</script></p>
<p>Dieses Skript initialisiert das Design basierend auf dem lokalen Speicher oder ist standardmäßig auf „leicht“ eingestellt.</p>
<p><strong>Nicht blockierende Skripte</strong></p> <p>Platzieren Sie alle anderen Skripte vor dem schließenden </body> Tag in einer nicht-Rendering-blockierenden Weise:</p>
<pre class="brush:php;toolbar:false"><code class="html"><script src="js/index.js"></script>
<script src="other_scripts.js"></script>
<!-- Closing </body> and </html> go here --></code>
<code class="javascript">const elToggleTheme = document.querySelector('#dark-mode-button input[type="checkbox"]');
elToggleTheme.checked = localStorage.theme === "dark";
elToggleTheme.addEventListener("change", () => {
const theme = elToggleTheme.checked ? "dark" : "light";
setTheme(theme);
});</code>