Warten Sie, bis die Homepage ist voll

Question

geladen

Ich habe seit einiger Zeit dafür suchen, aber ich kann keine Wege finden ...

Meine Webseite eine quadratische Textur als Hintergrund hat und diese Textur auf Wiederholung eingestellt ist fülle den Hintergrund. Wenn jemand zum ersten Mal meine Website betritt, wird die Textur wie ein Puzzle geladen, jedes Quadrat einzeln.

Gibt es eine Möglichkeit (irgendwie), die Anzeige der Webseite zu verzögern, bis der Hintergrund geladen wird?

Das einzige, was ich bis jetzt gefunden habe, hängt damit zusammen, ob man ein div mit einem onclick-Ereignis ein- und ausblendet.

CSS-Code für den Hintergrund:

html { 
background: url(/background.jpg) center center fixed; 
background-repeat: repeat; 
position: relative; 
} 

Answer 1

EDIT: Ich habe eine bessere Lösung gegeben. Es ist viel einfacher und direkter als mein erster Vorschlag. 2

Lösung:

Sie laden das Hintergrund-Bild in Javascript. Dann stellst du das Hintergrundbild auf das body-Element (oder was auch immer für ein Element). Sobald das Bild geladen ist, blenden Sie ein Ladeelement (Spinner) aus, das sich über dem Hauptinhalt befand.

Hier ist eine JSFiddle davon.

Lösung 1 (alt und umfangreichere):

Es ist ein wenig mehr Kreativität und umfangreich, aber sollte den Job zu erledigen.
Im Grunde, anstatt einen CSS-Hintergrund zu verwenden, verwenden Sie HTML5 canvas. Auf dieser Leinwand zeichnest du deine Textur mit einer for-Schleife. Sobald alles gezeichnet ist, zeigen Sie Ihre Seite an, indem Sie das Element loading verstecken.