web-dev-qa-db-fra.com

Comment empêcher le "flash" blanc sur le chargement de page créé par le délai de chargement de l'image d'arrière-plan?

Le problème est que, sur la plupart des sites Web, il y a des images d'arrière-plan. Ils prennent du temps à charger. Normalement, cela ne serait pas un problème si les images étaient optimisées et suffisamment petites. Cependant, sur certains de mes sites, les fichiers javascript se chargent avant tout le reste de la page, même s'ils se trouvent dans le pied de page! Cela crée un "flash" blanc avant le chargement de l'image d'arrière-plan. Pourquoi mon javascript se charge-t-il avant tout? J'ai ce problème sur de nombreux sites et je le vois partout. Voici le site sur lequel je travaille actuellement:

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

Merci!

tl; dr Comment puis-je différer le chargement de javascript sur mes sites Web afin que l'image d'arrière-plan se charge avant toute autre chose, empêchant ainsi le "flash" blanc avant la fin du téléchargement de l'image par le navigateur?.

javascriptcssjquery-deferred
29
alt

Ne tardez pas à charger certaines parties de votre site. Que se passe-t-il si l'image de fond présente une erreur de transmission et n'arrive jamais? Vos scripts ne se chargeraient jamais.

Au lieu de cela, si vous n'aimez vraiment pas le flash "blanc", définissez la couleur d'arrière-plan du document sur une couleur plus agréable, plus conforme à l'image de fond. Vous pouvez le faire dans le même style css:

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

C'est simple, ne coûte pratiquement rien, ne casse pas et ne retarde pas inutilement le téléchargement. On dirait que vous faites déjà quelque chose comme ça - je ne le changerais pas. Je ne pense pas que quiconque s’attende à ce que votre site Web ait une apparence particulière avant il se charge.

48
Surreal Dreams

Vous pouvez utiliser quelque chose comme ceci:

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

Par conséquent, il est important de noter que si la couleur de l’arrière-plan ne se charge pas rapidement, il est probable que javascript soit présent dans l’en-tête. Vous pouvez remédier à cela en mettant vos balises javascript

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

dans le pied de page de vos pages pour qu'il se charge après que le navigateur a déjà lu le css et affiché la majeure partie de la page. Je me rends compte que c’est un vieux message, mais j’y suis tombé dessus en réfléchissant moi-même à ce problème et j’ai réalisé (en me souvenant des conversations et des messages que j’avais déjà vus) que j’avais le js dans ma tête.

0
Robert McMahan

J'utiliserais une chaîne de requête "? 201611" sur l'URL de l'image dans css . Cela indique au navigateur quelle version de l'image doit être chargée. Ainsi, au lieu de rechercher chaque fois une nouvelle version, il chargera la version conservée dans le cache. L'effet de flash ne se produit que lors de la première visite du site.

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

0
SequenceDigitale.com

Je voulais ajouter quelque chose, au cas où une image de fond noire serait définie pour le corps. J'essayais avec des transitions entre les pages du même site. J'ai finalement utilisé cela (charge proprement le fond noir à partir du noir, en évitant le flash, oui!)

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