webentwicklung-frage-antwort-db.com.de

Wie kann man den weißen "Blitz" beim Laden der Seite verhindern, der durch die Verzögerung beim Laden von Hintergrundbildern verursacht wird?

Das Problem ist, dass es auf den meisten Websites im Internet Hintergrundbilder gibt. Sie brauchen Zeit zum Laden. Normalerweise wäre es kein Problem, wenn die Bilder optimiert und klein genug wären. Auf einigen meiner Websites finden die Javascript-Dateien jedoch ihren Weg, um vor allen anderen Elementen auf der Seite geladen zu werden, auch wenn sie in der Fußzeile sind! Dies erzeugt einen weißen "Blitz", bevor das Hintergrundbild geladen wird. Warum wird mein Javascript zuerst geladen? Ich habe dieses Problem an vielen Standorten und sehe es überall. Hier ist die Seite, an der ich gerade arbeite:

http://www.bridgecitymedical.com/wordpress/

Vielen Dank!

tl; dr Wie kann ich das Laden von Javascript auf meine Websites verschieben, sodass das Hintergrundbild vor allen anderen geladen wird, um zu verhindern, dass das weiße "Flash" erscheint, bevor der Browser das Bild heruntergeladen hat.

29
alt

Zögern Sie nicht, Teile Ihrer Website zu laden - was ist, wenn das Hintergrundbild einen Übertragungsfehler aufweist und niemals eintrifft? Ihre Skripte würden niemals geladen.

Wenn Sie den "weißen" Blitz wirklich nicht mögen, stellen Sie stattdessen die Hintergrundfarbe des Dokuments auf eine angenehmere Farbe ein, die mehr zu Ihrem Hintergrundbild passt. Sie können dies im gleichen CSS-Stil tun:

body {
    background: #EDEBED url(myGrayBackgroundImage.jpg);
}

Es ist einfach, hat praktisch keine Kosten, bricht nicht und verzögert nicht das unnötige Herunterladen. Es sieht so aus, als würdest du schon so etwas machen - ich würde es nicht ändern. Ich glaube, niemand hat die Erwartung, dass Ihre Site auf eine bestimmte Weise aussieht vorher sie wird geladen.

49
Surreal Dreams

Sie können so etwas verwenden:

HTML

<!-- Add a class to flag when the page is fully loaded -->
<body onload="document.body.classList.add('loaded')">

CSS

/* Hide slider image until page is fully loaded*/
body:not(.loaded) #slider img {
  display:none;
}
19
kbtzr

Beim Ändern der Hintergrundfarbe ist es wichtig zu beachten, dass der Grund für das schnelle Laden der Seite wahrscheinlich auf Javascript in der Kopfzeile zurückzuführen ist. Sie können dies beheben, indem Sie Ihre Javascript-Tags einfügen

<script type="text/javascript" src="/path/to/js/javascript.js"></script>

in der Fußzeile Ihrer Seiten, so dass sie geladen wird, nachdem der Browser die css bereits gelesen und den Großteil der Seite angezeigt hat. Mir ist klar, dass dies ein alter Beitrag ist, aber ich habe es überlegt, als ich selbst über dieses Problem nachgedacht habe. Durch das Erinnern an Gespräche und Posts, die ich zuvor gesehen hatte, wurde mir klar, dass ich die Js in meinem Header hatte.

0
Robert McMahan

Ich würde eine Abfragezeichenfolge "? 201611" für die Bild-URL in css ..__ verwenden. Dies sagt dem Browser, welche Version des Bildes geladen werden soll. Anstatt also jedes Mal nach einer neuen Version zu suchen, wird die im Cache gespeicherte Version geladen. Der Flash-Effekt tritt nur beim ersten Besuch der Website auf.

ex. http://domain.com/100x100.jpg?201611

Ich wollte etwas hinzufügen, falls ein schwarzes Hintergrundbild für den Körper eingestellt werden sollte. Ich habe mit Übergängen zwischen Seiten auf derselben Site experimentiert. Ich habe dies schließlich verwendet (lädt schwarzen Hintergrund säuberlich von Schwarz, vermeidet den Blitz ja!):

html{
    background-color: black;
}

body{
    -webkit-animation: fadein 1.5s; //I use chrome
    background: linear-gradient( rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75) ), url('wall_pattern.jpg');
    color: white;
}
0
adr1Script