Comment puis-je empêcher les images d'arrière-plan de clignoter avant les charges de contenu?

Question

Je travaille sur un new site et j'ai une image de fond répétitive qui fournit un flux "continu" des couleurs de la page. Visuellement, il se mélange parfaitement avec le contenu, cependant, quand la page se charge ou quand je passe à une autre page, il y a une courte pause avant que le contenu se charge lorsque cette image d'arrière-plan est visible - provoquant une sorte d'effet clignotant .

Voici le css:

html      { background: #fff url(../_images/bg_html.jpg) repeat-y center top; } 

body      { 
         font-family: Arial, Helvetica, sans-serif; 
         font-size: .875em; 
         line-height: 1.333em; /* 16px/12px = 1.333em */ 
         color: #000; 
         background: url(../_images/bg_body.png) repeat-x left top; 
         } 
#container { 
         width: 980px; 
         margin: 0 auto; 
         background: url(../_images/bg_container.jpg) repeat-y left top; 
         overflow: hidden; 
         } 

Les images de fond sont très petites - 4k, il me semble que le chargement de la page et les transitions peuvent être beaucoup plus transparente. J'apprécierais certaines idées qui mènent à une solution.

Merci!

Answer 1

Vous ne pouvez pas vraiment l'éviter, car c'est le navigateur qui essaie de rendre la page en cours de chargement. Mais vous pouvez réduire son impact, de sorte que ce n'est pas si perceptible.

Pour cela, vous devez faire de l'en-tête une div avec les dimensions exactes depuis le début, et rendre sa couleur d'arrière-plan du même vert que l'image.

Et le menu de gauche doit avoir la bonne largeur depuis le début, de sorte que vous ne voyez pas la couleur grise "rétrécir" lorsque la page se charge.

P.S. C'est l'une des raisons pour lesquelles il est recommandé de spécifier la taille des images dans la page. Si vous ne le faites pas, le navigateur "redistribue" la page au fur et à mesure de son chargement et crée un effet clignotant similaire.

Answer 2

vous pouvez essayer jquery preloader pour cela.

Answer 3

Avez-vous regardé dans la préextraction?

http://devedge-temp.mozilla.org/viewsource/2003/link-prefetching/index_en.html