Affichage background-image trop lent...

Bonjour à tous,

Sur mon site lorsque je change de page j'ai une image de fond différente, et mon container qui arrive par fondu. Le problème c'est que lorsque la page se charge j'ai d'abord un fond blanc, ensuite l'image background puis le container qui s'affiche. Je voudrais que le background s'affiche tout de suite (sans fond blanc). Je sais pas si c'est très clair...

Merci pour vos réponses
Modifié par Twins77 (27 Jun 2014 - 11:38)

Hello,

Si ton image apparait en "fondu", c'est que tu as un soucis d'optimisation ...
Peut-on avoir un lien? Ou au moins, un aperçu de ce que tu voudrais voir apparaitre en fond, histoire qu'on te propose une réponse adaptée à ce que tu veux

A plus,
Yokii

peut -etre il fautque tu alleges la taille de ton image de fond?
tu peux le faire en ligne:
https://tinypng.com/

salut,
c'est parce que ton élément apparaît avant que ton image ne soit chargée. Tu peux passer par du JS pour régler ça et ne faire apparaître ton élément qu'une fois l'image totalement chargée.
Ça pourrait faire genre

<div></div>

.loaded {background:url(mon-image.jpg);}

var div = document.querySelector("div");

window.addEventListener("load", function(){
	
	var imgToLoad = new Image();
	
	imgToLoad.onload = function (){
		div.className = "loaded";
	}
	
	imgToLoad.src = "mon-image.jpg":
	
}, false);

Le code est de tête et pas testé.

J'ai déjà optimisé mes images sous photoshop
Je vous envoi le lien sûrement plus parlant que des explications !

http://martinique-location.net/projet1/index.html

comme ça vous verrez déjà le code que j'ai fait...
Modifié par Twins77 (27 Jun 2014 - 15:07)

J'ai testé le code mais ce la ne fonctionne pas bien

En faite ce qui serai cool c'est que mon container s'affiche normalement et que ce soit l'image qui vienne en fondu ... possible ?