it-swarm.it

Come evitare il bianco "flash" sul caricamento della pagina creato dal ritardo di caricamento dell'immagine di sfondo?

Il problema è che, nella maggior parte dei siti sul Web, ci sono immagini di sfondo. Prendono tempo per caricare. Normalmente, non sarebbe un problema se le immagini fossero ottimizzate e abbastanza piccole. Tuttavia, su alcuni dei miei siti, i file javascript trovano il modo di caricare prima di qualsiasi altra cosa nella pagina, anche se sono nel piè di pagina! Questo crea un "flash" bianco prima del caricamento dell'immagine di sfondo. Perché il mio javascript viene caricato prima di ogni altra cosa? Sto avendo questo problema su molti siti, e lo vedo ovunque. Ecco il sito al quale sto lavorando attualmente:

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

Grazie!

tl; dr Come posso rinviare il caricamento di javascript sui miei siti web in modo che l'immagine di sfondo venga caricata prima di qualsiasi altra cosa, impedendo così quel "flash" bianco prima che il browser finisca di scaricare l'immagine.

29
alt

Non ritardare il caricamento di parti del tuo sito: cosa accadrebbe se l'immagine di sfondo avesse un errore nella trasmissione e non arrivasse mai? I tuoi script non verrebbero mai caricati.

Invece, se non ti piace il flash "bianco", imposta il colore di sfondo del documento su un colore più piacevole, più in linea con l'immagine di sfondo. Puoi farlo nello stesso stile css:

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

È semplice, non ha praticamente alcun costo, non si rompe e non ritarderà le cose dal download inutilmente. Sembra che tu stia già facendo qualcosa del genere - non lo cambierei. Non penso che nessuno abbia l'aspettativa che il tuo sito appaia in un certo modo prima carichi.

48
Surreal Dreams

Puoi usare qualcosa come questo:

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

Pertanto, se si modifica il colore di sfondo, è importante notare che il motivo per cui la pagina non viene caricata rapidamente è probabilmente dovuto al fatto che javascript è presente nell'intestazione. Puoi rimediare inserendo i tag javascript

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

nel piè di pagina delle pagine in modo che si carichi dopo che il browser ha già letto il css e visualizzato la maggior parte della pagina. Mi rendo conto che questo è un vecchio post, ma ci sono riuscito mentre pensavo a questo problema e ho realizzato (ricordando le conversazioni e i post che avevo visto prima) che avevo il js nel mio header.

0
Robert McMahan

Vorrei utilizzare una stringa di query "? 201611" nell'URL dell'immagine in css . Ciò indica al browser quale versione dell'immagine caricare. Quindi, invece di controllare ogni volta la nuova versione, caricherà la versione conservata nella cache. L'effetto flash avverrà solo la prima volta che il sito viene visitato.

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

Volevo aggiungere qualcosa, in caso di avere un'immagine di sfondo nera impostata per il corpo. Stavo sperimentando transizioni tra le pagine nello stesso sito. Finalmente ho usato questo (carica nettamente il fondo nero dal nero, evitando il flash sì!):

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