Hintergrundbild - Oberhalb der Falzoptimierung

Question

Ist es möglich, ein Hintergrundbild für die gesamte Website zu laden, ohne die Ladegeschwindigkeit zu beeinflussen? Ich lade Sie ein Bild im CSS:

#wrapper {background-image:url("../images/swirl.jpg");} 

Der Wrapper meiner Seite umfasst, so dass die Seite geladen ist und das Hintergrundbild geladen wird, um den Rest der CSS verlangsamt, usw. geladen und die Auswirkungen auf die Leistung was wäre es, wenn es eine feste Hintergrundfarbe wäre oder weiß bleibt.

Aber ich frage mich, gibt es eine Möglichkeit zu laden, nachdem die Seite geladen hat oder eine Art, um die Seitenladegeschwindigkeit zu beeinflussen?

Answer 1

Wenn Sie bereit sind, JavaScript zu verwenden, können Sie feststellen, wann die Seite geladen wurde, und erst dann die ID festlegen, um das Hintergrundbild zu laden. Wenn das Hintergrundbild auf dem body Element gesetzt ist, sollte dies den Trick tun (wenn nicht, body ändern ein Wähler zu sein, die das Element passt Sie das Hintergrundbild anwenden möchten):

window.addEventListener('load', function() { 
    document.querySelector('body').setAttribute('id', 'wrapper'); 
}) 

Answer 2

Einige Gedanken :

Muss getestet werden.

• optimieren das eigentliche Bild und stellen Sie sicher, es ist Größe angemessen ist (Sie brauchen nicht 5000px im Wert von Bild, wenn die meisten Bildschirme nur 1366×768 sind).

und/oder ....

• Verwenden Sie Javascript um das Hintergrund-Bild zu setzen, nachdem die Seite geladen wird.