In manchen Fällen kann es vorkommen, dass auf deinem Divi Ladebildschirm ein falscher Inhalt bzw. ein noch nicht gestyler Inhalt angezeigt wird. Dieser Inhalt blitzt zwar nur wenige Sekunden auf, wenn die Seite geladen wird, aber dennoch ist dieser Anzeigefehler ziemlich nervig und wirkt meiner Meinung nach auch unprofessionell.
Wenn beim Laden einer Seite mit dem Divi Theme für eine Millisekunde ungestylter oder falscher Content aufblitzt, dann spricht man von FOUS (Flash of unstyled Content). Dieses Aufblitzen liegt darin begründet, dass die entsprechende CSS-Datei, die für das Styling des Inhalt verantwortlich ist, noch nicht geladen wurde.
In diesem Artikel zeige ich dir, wie du dieses Aufblitzen auf simple Weise innerhalb von 60 Sekunden verhinderst, indem du ein kurzes Code Schnipsel bei Divi einfügst.
Schau gerne auch parallel das Video, welches ich zur besseren Visualisierung für dich aufgenommen habe:
Sie sehen gerade einen Platzhalterinhalt von Standard. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf den Button unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
Mehr InformationenHinweis: Mit Aktivierung des Videos wird YouTube im Erweiterten Datenschutzmodus aktiviert. Mit Aktivierung stimmst du den Datenschutzbestimmungen von YouTube zu.
Das Problem: Durchblitzen von ungestylten Elementen beim Seitenaufbau mit dem Divi Theme
Wenn du das Divi Theme verwendest und beispielsweise einen individuellen Header mit dem Theme Builder erstellt hast, dann kann es vorkommen, dass beim Laden deiner Webseite vorübergehend falscher bzw. ungestylter Content angezeigt wird.
Ich persönlich habe dieses Problem vor allem beim Seitenwechsel in der mobilen Ansicht festgestellt, da hier die Ladezeiten gerade aus dem mobilen Netz langsamer sind als über den Computer.
Zum besseren Verständnis habe ich hier einen Screenshot für dich aufgenommen, der das Problem visualisiert:
Auch wenn dieser Bildschirm nur für eine Millisekunde zu sehen ist, hat es mich gestört. Und deswegen habe ich nach einer Lösung für das Problem gesucht.
Divi Ladebildschirm Fehler beheben
Da dieses Problem zu einem der häufigsten Darstellungsprobleme mit dem Divi Theme zählt, habe ich im Internet eine Lösung dafür gefunden, die ziemlich simpel umzusetzen ist.
Kopiere einfach den folgenden Code und füge ihn in den Theme Optionen von Divi ein.
Navigiere dazu im WordPress Dashboard im Menü auf der linken Seite zu Divi und klicke auf Theme Optionen. Dort angekommen klickst du oben auf den Reiter Integration und fügst den Code dann im <head> deines Blogs ein.
Der Code zum Einfügen lautet:
<script type="text/javascript">
var elm=document.getElementsByTagName("html")[0];
elm.style.display="none";
document.addEventListener("DOMContentLoaded",function(event) {elm.style.display="block"; });
</script>Der Code bedeutet im Grunde nichts anderes, als dass sämtlicher Inhalt solange versteckt wird bis er vollständig geladen wurde. Somit eine simple Lösung für dieses gängige Problem.
Vielen Dank an Mark Hendriksen für dieses hilfreiche Script.
0 Kommentare