...

Divi Ladebildschirm zeigt kurz falschen Inhalt [GELÖST]

Divi Anzeigefehler Seitenaufbau
Lukas Fischer

Geschrieben von Lukas Fischer

c

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. Auf meinem YouTube Kanal findest du zudem weitere Videos über Divi.

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:

Divi Ladebildschirm zeigt falschen bzw. ungestylten Inhalt
Divi Ladebildschirm zeigt falschen bzw. ungestylten Inhalt

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.

Mit * gekennzeichnete Links sind Empfehlungslinks. Wenn du über diesen Link einen Kauf tätigst, erhalte ich ein bisschen Geld für meinen nächsten Kaffee ☕

Für dich verändert sich der Preis dadurch natürlich nicht und du unterstützt damit kostenlos meinen Blog/YouTube Kanal. Selbstverständlich empfehle ich nur Produkte, die ich selbst nutze und getestet habe.

Lukas Fischer

Hey, ich bin Lukas Fischer und auf meinem Blog schreibe ich über WordPress und das Divi Theme! Vielen Dank, dass du da bist!

20. Dezember 2023

YouTube Kanal

Auf meinem YouTube Kanal findest du zu jedem meiner Artikel das entsprechende Video sowie zusätzliche Inhalte.

0 Kommentare

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert