Wie stoppe ich das Flashen von nicht gestylten Inhalten (FOUC) auf einer Webseite?
Antworten:
Was ich getan habe, um FOUC zu vermeiden, ist:
Stellen Sie den Körperteil wie folgt ein: <body style="visibility: hidden;" onload="js_Load()">
Schreiben Sie eine js_Load()JavaScript-Funktion:document.body.style.visibility='visible';
Bei diesem Ansatz bleibt der Hauptteil meiner Webseite verborgen, bis die gesamte Seite und die CSS-Dateien geladen sind. Sobald alles geladen ist, macht das Onload-Ereignis den Körper sichtbar. Der Webbrowser bleibt also leer, bis alles auf dem Bildschirm erscheint.
Es ist eine einfache Lösung, aber bisher funktioniert es.
<noscript><style>body { visibility: visible; }</style></noscript>am Ende hinzufügen, damit die Site auch mit deaktiviertem JS funktioniert.
Das Problem bei der Verwendung eines CSS-Stils zum anfänglichen Ausblenden einiger Seitenelemente und der Verwendung von Javascript, um den Stil nach dem Laden der Seite wieder sichtbar zu machen, besteht darin, dass Personen, für die Javascript nicht aktiviert ist, diese Elemente niemals sehen können. Es ist also eine Lösung, die sich nicht elegant verschlechtert.
Ein besserer Weg ist daher, Javascript zu verwenden, um diese Elemente nach dem Laden der Seite sowohl zunächst auszublenden als auch erneut anzuzeigen. Mit jQuery könnten wir versucht sein, Folgendes zu tun:
$(document).ready(function() {
$('body').hide();
$(window).on('load', function() {
$('body').show();
});
});
Wenn Ihre Seite jedoch sehr groß ist und viele Elemente enthält, wird dieser Code nicht früh genug angewendet (der Dokumententext wird nicht früh genug fertig sein) und Sie sehen möglicherweise immer noch eine FOUC. Es gibt jedoch ein Element, das wir ausblenden können, sobald ein Skript im Kopf gefunden wird, noch bevor das Dokument fertig ist: das HTML-Tag. Also könnten wir so etwas machen:
<html>
<head>
<!-- Other stuff like title and meta tags go here -->
<style type="text/css">
.hidden {display:none;}
</style>
<script type="text/javascript" src="/scripts/jquery.js"></script>
<script type="text/javascript">
$('html').addClass('hidden');
$(document).ready(function() { // EDIT: From Adam Zerner's comment below: Rather use load: $(window).on('load', function () {...});
$('html').show(); // EDIT: Can also use $('html').removeClass('hidden');
});
</script>
</head>
<body>
<!-- Body Content -->
</body>
</html>
Beachten Sie, dass die Methode jQuery addClass () * außerhalb * der Methode .ready () (oder besser .on ('load')) aufgerufen wird.
$('html').show()'mit $('html').removeClass('hidden');. Dies macht klarer, dass die Bereitschaftsfunktion das rückgängig macht addClass.
removeClass(wie ich vorschlage) und nicht show(wie in der ursprünglichen Antwort) verwendet wird - andernfalls wird das HTML NIEMALS angezeigt . Ich glaube, dass jQuerys show () jetzt explizit nach dem Anzeigezustand des CSS-Stils sucht und diesen wiederherstellt, um eine Beeinträchtigung des Stils zu vermeiden. Daher ist es notwendig, die 'versteckte' Klasse tatsächlich zu entfernen.
<style>html { display: none; }</style>die <head>und dann Ihre realen Stile direkt zuvor haben </body>?
Eine reine CSS-Lösung:
<html>
<head>
<style>
html {
display: none;
}
</style>
...
</head>
<body>
...
<link rel="stylesheet" href="app.css"> <!-- should set html { display: block; } -->
</body>
</html>
Während der Browser die HTML-Datei analysiert:
<html>.Dies hat gegenüber einer Lösung, die JavaScript verwendet, den Vorteil, dass sie auch dann für Benutzer funktioniert, wenn JavaScript deaktiviert ist.
Hinweis: Sie erlaubt setzen <link>innerhalb von <body>. Ich sehe es jedoch als Nachteil, weil es gegen die gängige Praxis verstößt. Es wäre schön, wenn es ein deferAttribut für das <link>gibt <script>, was es gibt , denn das würde es uns ermöglichen, es in das zu setzen <head>und trotzdem unser Ziel zu erreichen.
display: noneauch das Hintergrundbild oder die Hintergrundfarbe ausgeblendet wird. Da meine Website ein dunkles Thema hat, würde sie weiß blinken. Verwenden visibility: hiddenwar für meinen Fall besser.
<head>anstelle von steht <body>. (Obwohl ich nehme an, wenn Sie eine wirklich lange Seite hatten, beginnt der Browser möglicherweise damit, die Seite anzuzeigen, bevor das Ende der Seite geladen wurde. Dies ist jedoch mein bevorzugtes Verhalten, da meine Site große Tabellen aus einer Datenbank lädt.) Daumen hoch für eine einfache Lösung, die kein JavaScript erfordert!
Dies ist die, die für mich funktioniert hat und kein Javascript erfordert. Sie funktioniert hervorragend für Seiten mit vielen Elementen und viel CSS:
Fügen Sie zunächst eine dedizierte <STYLE>Einstellung für das <HTML>Tag hinzu, wobei die Sichtbarkeit "ausgeblendet" und die Deckkraft "0" oben in Ihrem HTML-Code sind, z. B. am Anfang des <HEAD>Elements, z. B. oben in Ihrem HTML-Code :
<!doctype html>
<html>
<head>
<style>html{visibility: hidden;opacity:0;}</style>
Stellen Sie dann am Ende Ihrer letzten CSS-Stylesheet-Datei die Sichtbarkeits- und Deckkraftstile auf "sichtbar" bzw. "1" ein:
html {
visibility: visible;
opacity: 1;
}
Wenn Sie bereits einen Stilblock für das 'HTML'-Tag haben, verschieben Sie den gesamten' HTML'-Stil an das Ende der letzten CSS-Datei und fügen Sie die Tags 'Sichtbarkeit' und 'Deckkraft' wie oben beschrieben hinzu.
https://gist.github.com/electrotype/7960ddcc44bc4aea07a35603d1c41cb0
html{display:none;}im headund html{display:block;}im Stylesheet verwenden muss, um FOUC mit Chromium-basierten Browsern vollständig zu erobern. (Ich habe keine Probleme mit einem dunklen Hintergrund auf dem body.)
Eine Lösung, die nicht von jQuery abhängt, die auf allen aktuellen Browsern funktioniert und auf alten Browsern nichts bewirkt, enthält Folgendes in Ihrem Head-Tag:
<head>
...
<style type="text/css">
.fouc-fix { display:none; }
</style>
<script type="text/javascript">
try {
var elm=document.getElementsByTagName("html")[0];
var old=elm.class || "";
elm.class=old+" fouc-fix";
document.addEventListener("DOMContentLoaded",function(event) {
elm.class=old;
});
}
catch(thr) {
}
</script>
</head>
Dank @justastudent habe ich versucht, nur Einstellungen vorzunehmen, elm.style.display="none";und es scheint wie gewünscht zu funktionieren, zumindest im aktuellen Firefox Quantum. Hier ist also eine kompaktere Lösung, die bisher die einfachste ist, die ich gefunden habe und die funktioniert.
<script type="text/javascript">
var elm=document.getElementsByTagName("html")[0];
elm.style.display="none";
document.addEventListener("DOMContentLoaded",function(event) { elm.style.display="block"; });
</script>
classListAPI vorschlagen .
elm.style.display = 'none';und das dann rückgängig machen elm.style.removeProperty('display');?
Eine andere schnelle Lösung, die auch in Firefox Quantum funktioniert, ist ein leeres <script>Tag in der <head>. Dies beeinträchtigt jedoch Ihre Einblicke in die Seitengeschwindigkeit und die Gesamtladezeit.
Ich hatte 100% Erfolg damit. Ich denke, es ist auch der Hauptgrund, warum oben Lösungen mit anderen JS in Arbeit sind.
<script type="text/javascript">
</script>
Niemand hat über CSS gesprochen @import
Das war das Problem für mich, mit dem ich zwei zusätzliche Stylesheets direkt in meine CSS-Datei geladen habe @import
Einfache Lösung: Ersetzen Sie alle @importLinks durch<link />
@importwird synchron sein.
Ich habe einen Weg gefunden, der keinerlei echte Codeänderung erfordert, woohoo! Mein Problem hing mit dem Importieren mehrerer CSS-Dateien NACH einigen Javascript-Dateien zusammen.
Um das Problem zu beheben, habe ich meine CSS-Links so verschoben, dass sie über meinen Javascript-Importen liegen. Auf diese Weise konnte mein gesamtes CSS importiert und so schnell wie möglich gestartet werden. Wenn der HTML-Code auf dem Bildschirm angezeigt wird, wird die Seite ordnungsgemäß formatiert, auch wenn der JS nicht bereit ist
Hier ist mein Code. Ich hoffe, er löst Ihr Problem
set <body style="opacity:0;">
<script>
$(document).ready(function() {
$("body").css('opacity', 1);
});
</script>
<body style="opacity:0;">
Die beste Lösung, die ich bisher gefunden habe, ist folgende:
Fügen Sie einem <style/>Tag in alle Stile Ihres Headers hinzu<head/>
Fügen Sie oben im Stil-Tag .not-visible-first{visibility: hidden}+ anderen Header-Stil hinzu
Fügen Sie CSS über JS am Ende des Körpers hinzu
document.getElementsByTagName("head")[0].insertAdjacentHTML("beforeend","<link rel=\"stylesheet\" href=\"/css/main.min.css?v=1.2.4338\" />");
Und denken Sie daran .not-visible-first{visibility: visible}, am Ende von hinzuzufügenmain.min.css
Diese Option sorgt für eine bessere Benutzererfahrung
Sie könnten dies mit Vanille versuchen
function js_method(){
//todos
var elementDiv = document.getElementById("main");
elementDiv.style.display ="block";
}<body onload="js_method()" id="main" style="display:none">
//todos
<h2>Hello</h2>
</body>Der einfachste Weg, den ich kenne, besteht darin, das HTML-Tag auszublenden und dann am Ende Ihrer Javascript-Datei das HTML-Tag einzublenden.
HTML
<html style="display:none;">
...
</html>
Javascript
/*
* FOUC Fix - Flash of Unstyled Content
* By default, the <html> tag is hidden to prevent the flash of unstyled content.
* This simple fadeIn() function will allow the page to gracefully fade in once
* all assets are loaded. This line of code must remain at the bottom of the js
* assets.
*/
$( 'html' ).fadeIn();
Quelle: https://gist.github.com/marchershey/139db0e8fd6f03a83578698409d333ce
fadeIn()eine jQuery-Methode ist, kein natives JavaScript.