Bonjour tout le monde,

J'ai créé un site web pour ma commune et je constate un bug sur lequel je sèche complètement. 

Je me permets donc de vous solliciter afin de pouvoir (enfin) le résoudre.

Je constate la présence d'un "flash blanc" entre le passage d'une page à l'autre du site. Ce phénomène ne se reproduit qu'avec Chrome (pas de souci avec IE et Firefox) et n'apparaît pas en local, y compris sous Chrome.

J'avoue être sec là dessus.

Merci d'avance à tous pour votre attention et votre aide  

Adresse du site : www.saintaugustin-19.fr

Salut,

je pense que c'est tout simplement le temps de chargement de la page qui est plus long.
L'image en background met plus de temps à se charger dans Chrome.

Peut-être la mise en cache qui ne se fait pas correctement dans Chrome.

Ps ; rien à voir avec ton problème mais il y a un truc bizarre sur ton site.
Même quand la page ne va pas jusqu'en bas de la fenêtre il y a une barre de scroll.

Et autre chose d'important, JAMAIS de commentaire avant le doctype. Sinon tu va avoir des surprises avec IE.

Hello !

Pour la barre de scroll latérale, c'est fait exprès, je force l'affichage afin d'éviter un décalage visuel lorsque l'utilisateur passe d'une page "courte" (qui ne nécessite pas de barre scroll) à une page "longue" (qui elle nécessite la barre scroll).

Je viens de déplace le commentaire, merci beaucoup pour l'info

Pour l'affichage du background, verrais-tu une solution ?... et pourquoi cela ne pose problème qu'avec Chrome et uniquement en ligne et non en local, d'après toi ? 

Cela dit, suis pas sûr que ce soit un problème sur le background :/ 

-
Edité par Ouebmaster_ETC 18 février 2016 à 8:46:50

Pour ta barre, ok par soucis de design et de décalage désagréable.
Mais le problème n'est pas qu'elle soit présente mais qu'on puisse scroller de quelques pixel.
Comme si, même si le contenu ne va pas jusqu'en bas, ça dépassait de la fenêtre.

Je n'ai pas de solution pour ton problème... Peut-être forcer la mise en cache de l'image.
parce que pour moi ça vient de là.
Fais un test simple, mets une couleur de background bien violente, genre rouge.
Si tu le vois avant de voir l'image, c'est bien un problème de chargement de cette image qui est plus long.
Après, pourquoi sur chrome, pourquoi pas en local, je n'en ai aucune idée...

-
Edité par Frogweb 18 février 2016 à 8:52:21

Le truc, c'est que le height doit être à 101% pour que la barre scroll soit présente et, du coup, le scroll de quelques pixels (qui ne sert à rien, je suis bien d'accord) est possible.
Je n'ai pas trouvé d'autres solutions pour éliminer ce décalage.

-
Edité par Ouebmaster_ETC 18 février 2016 à 8:59:04

Test effectué, effectivement le flash disparaît lorsque le backgound n'appelle plus l'image mais une couleur.

J'ai modifié la taille du background et, du coup, le flash n'est plus. Par contre, il subsiste le même phénomène sur le corps du site, au niveau du background du header et du menu gauche.
Comment puis-je forcer la mise en cache de ces images ? 

-
Edité par Ouebmaster_ETC 18 février 2016 à 9:09:07

Pour forcer l'affichage de la barre de défilement : body { overflow-y: scroll; }, c'est plus élégant

Merci pour le code pour la barre scroll, en effet c'est bien plus élégant 

J'ai beau chercher sur le net et balayer mon code dans tous les sens, je ne comprends toujours pas le pourquoi de ce flash.
J'ai contourner l'inconvénient en modifiant le background du site. Par contre, comme dit plus haut, le flash subsiste (même si plus léger car le PNG est moins lourd) sur le header et le menu de gauche.

Ce qui me semble très étonnant, c'est que je n'ai constaté ce dysfonctionnement que depuis peu et que je suis convaincu à 100% qu'il n'existait par auparavant.

Y'a t'il une solution pour forcer la mise en cache des IMG (car cela semble réagir comme si la mis en cache ne se faisait pas) ?

Précision : si l'on navigue, on peut apercevoir que (par instants), le flash n’apparaît plus. Si vous le souhaitez, faites des aller-retour entre les onglets Accueil et Contacts & Météo pour le constater.

-
Edité par Ouebmaster_ETC 20 février 2016 à 10:49:36

Hop Google !

https://www.google.fr/search?q=mise+en+cahce+des+image&ie=utf-8&oe=utf-8&gws_rd=cr&ei=_zfIVovwL8LrarTipNAF#q=mise+en+cache+des+image

Bon, après quelques recherches (et surtout un long stand by sur le sujet), je reviens à la charge pour solliciter vos avis.

En fait, après plusieurs tests, la conclusion est la suivante : lorsque le background image est appelé à partir de la feuille CSS, j'ai un flash blanc.
Si je rentre le code relatif à l'affichage de l'image directement dans le html de la page, je n'ai plus le flash.

Cela pourrait donc sous entendre que le problème vient de la feuille css...  ou pas ?

Quels sont vos avis là dessus ? 

C'est normal : une requête http pour le CSS, puis une autre requête http pour aller chercher l'image appelée par le CSS. Pour réduire cet effet, il est conseillé de mettre en plus un background-color d'une couleur approchante, pour avoir une transition plus en douceur.

Oui, sauf que le flash est présent sur des img super légères... chose qui ne se produisait pas avant... et constat uniquement sur Chrome.
Si on doit remplacer toutes les background image par des color sous prétexte une la moindre img produit un flash sous Chrome... ça va être vite la misère !

Pas remplacer. Ajouter. Et c'est une bonne pratique à la base, donc on devrait le faire à chaque fois, quelle que soit l'image.

-
Edité par Lamecarlate 15 mars 2016 à 17:31:03

J'entends le conseil.
Pour autant, qu'une img en background de 50k ne puisse pas s'afficher sans un flash... j'avoue ne pas comprendre et tenter de masquer le truc plutôt que de comprendre pourquoi il se produit ne me satisfait pas.

Tu vois ce que je veux dire ?

Mettre une couleur de fond n'est pas masquer le truc.

Est-ce que tu pourrais nous donner une page en ligne pour qu'on expérimente le souci nous-même ?

Oui bien sûr, avec plaisir.

www.saintaugustin-19.fr

On peut constater le flash, entre autres, sur le header (il suffit de naviguer d'un onglet à l'autre).

Code sur la feuille css :

#header{
  width:731px;
  height:90px;
  margin:0 5px 0 5px;
  background-image: url(pictures/header8.png);
}

NB : le flash n'est constaté qu'avec la navigateur Chrome

Tu as lu le message de Frogweb plus haut ?

Salut,

vide le cache de Chrome. Pour ma part je n'ai plus le soucis depuis que tu as changé l'image de background.

-
Edité par Frogweb 17 mars 2016 à 8:46:43

@ Frogweb :

Oui, moi non plus je n'ai plus de flash sur le body background depuis que j'ai changé l'img.
Mais bon, j'ai quand même toujours le même problème sur les background du header, et de la colomne, qui affichent des img de très petites tailles. 

@ Lamecarlate :

Oui, j'ai bien lu le message de Frog et je suis tombé sur ça : http://www.creativejuiz.fr/blog/tutoriels/mettre-en-cache-les-fichiers-statiques-de-votre-site-web-htaccess

Pour autant, je ne suis pas un professionnel, et j'avoue que je n'y ai pas compris grand chose :/

J'ai créé un .htaccess avec ce code, que j'ai mis à la racine du site... mais ça ne change rien. 

## contrôle du cache navigateur - Expire headers
<IfModule mod_expires.c>
	ExpiresActive On
	ExpiresDefault "access plus 7200 seconds"
	ExpiresByType image/jpg 			"access plus 1 week"
	ExpiresByType image/jpeg 			"access plus 1 week"
	ExpiresByType image/png 			"access plus 1 week"
	ExpiresByType image/gif 			"access plus 1 week"
	ExpiresByType image/svg+xml			"access plus 1 week"
	AddType image/x-icon .ico
	ExpiresByType image/ico 			"access plus 1 week"
	ExpiresByType image/icon 			"access plus 1 week"
	ExpiresByType image/x-icon 			"access plus 1 week"
	ExpiresByType text/css 				"access plus 1 week"
	ExpiresByType text/javascript 		"access plus 1 week"
	ExpiresByType text/html 			"access plus 7200 seconds"
	ExpiresByType application/xhtml+xml 	"access plus 7200 seconds"
	ExpiresByType application/javascript 	"access plus 1 week"
	ExpiresByType application/x-javascript 	"access plus 1 week"
	ExpiresByType application/x-shockwave-flash "access plus 1 week"
</IfModule>
<IfModule mod_headers.c>

<FilesMatch "\\.(ico|jpe?g|png|gif|swf)$">
Header set Cache-Control "max-age=2592000, public"
</FilesMatch>

<FilesMatch "\\.(css)$">
Header set Cache-Control "max-age=604800, public"
</FilesMatch>

<FilesMatch "\\.(js)$">
Header set Cache-Control "max-age=216000, private"
</FilesMatch>

<FilesMatch "\\.(x?html?|php)$">
Header set Cache-Control "max-age=600, private, must-revalidate"
</FilesMatch>

</IfModule>
Header unset ETag
FileETag none

 Pourriez-vous me filer un p'tit coup de main svp... ou me dire concrètement ce que je dois faire ?

-
Edité par Ouebmaster_ETC 18 mars 2016 à 7:44:09

Personne pour me guider et tenter de me faire progresser ?

Juste pour savoir... pourquoi plus aucun message ?

J'ai commis une erreur déontologique ?

La collaboration et l'entraide sont réservées à un cercle d'initiés ? 

J'aimerai simplement avoir l'info, parque je pensais que le forum était un lieu dans lequel on pouvait espérer des échanges et, par le fait, progresser.


 

Pour ma part, je n'ai plus répondu parce que je m'y connais peu en cache, je ne saurais t'aider plus loin, désolée. Tu n'as rien fait de mal

Même réponse que Lamecarlate
Désolé mais ça dépasse mes compétences...

Après peut-être as-tu bien fait les choses mais ça n'a pas résolu ton problème.
c'est peut-être un bug de Chrome.

Par contre je te donne un conseil : jamais rien avant le doctype et surtout pas de commentaire.

Ah, et puis de temps en temps on fait autre chose que d'être sur le forum....

-
Edité par Frogweb 21 mars 2016 à 11:43:07

Me voilà rassuré !

Sinon, Frogweb, même chose pour moi... je bosse aussi hein

Ce qui est étonnant, c'est que ce flash n'existe qu'avec Chrome online (en test local il n'apparaît pas).
Si c'est un bug Chrome (ce qui paraît une conclusion logique), je suis très étonné de ne trouver aucun autre témoignage allant dans ce sens sur le Web.

:/