[résolu] [bug IE] Chargement lent d'une image de fond dans une div.

Bonjour,

j'aurais eu besoin de l'aide de professionels du css afin de m'aider dans un soucis que j'ai rencontré lors de la création de mon site, et je n'ai aucune idée de comment le régler malgrès mes recherches.

Dans ma page principale, je créé une div qui va simuler la taille de la page:

#layout {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	min-width: 800px;
	min-height: 600px;
}

Ensuite, je créé "n" autres div qui serviront à afficher une image de fond qui sera composé de plusieurs images répétées :

#layout .background_top {
	background-image: url(../images/background_top.png);
	background-repeat: repeat-x;
	background-position: top;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: auto;
	height: 95px;
	width: auto;
	z-index: -20;
}
#layout .background {
	background-image: url(../images/background.png);
	background-attachment:fixed;
	position: absolute;
	top: 95px;
	left: 0;
	right: 0;
	bottom: 0;
	height: auto;
	width: auto;
	z-index: -20;
}

Sur mon exemple, je n'en ai que deux : La première défini le haut du background, la seconde, le reste.

Voilà donc mon soucis : lorsque je charge la page sous firefox, aucun soucis, cependant, lorsque je la charge sous internet explorer 7, l'image de fond se génère assez lentement pour que ça soit visible à l'oeil nu (environ 1,5 seconde, d'ailleurs, lorsque l'on switch de page et que le cache recharge l'image, cela redemande le même temps d'exécution), il y aurait la possibilité que je charge l'image de fond qui rempli le reste de la page dans le body, mais dans ce cas là, lorsque l'utilisateur utilise la fonction de zoom du navigateur, l'image de fond dans la partie supérieur de la page se zoom tandis que l'image de fond du body ne se zoom pas, ce qui provoque un effet assez disgracieux...

Je sais que très peu de gens utilisent le zoom des navigateurs, mais j'aurais aimé savoir tout de même si il existe une solution pour palier à ça, c'est à dire :

-soit ne zoomer aucune des deux images de fond quand l'utilisateur zoom
-soit ne pas ralentir le chargement de la page lorsque je créé deux divs imitant un background...

En espérant m'être fait comprendre, et que quelqu'un me guide vers une solution, je vous remercie d'avance pour le temps de réflexion que vous m'accordez, je vais continuer à chercher de mon côté en attendant.

Merci !

Circle

Edit : Je crois que je me suis trompé de section, ce post aurait été mieux dans le salon CSS. -_-' (Je n'ai pas fais attention, comme je suis débutant en css, j'ai vu débutant... désolé)
Modifié par circle (03 Aug 2008 - 23:03)

Bonjour,

Les options que tu as prises pour intégrer ton design me semblent douteuses. On pourrait avoir un aperçu du design à intégrer?

Et une page en ligne avec ce que tu as déjà fait, tant qu'à faire.
Modifié par Florent V. (30 Jul 2008 - 11:06)

Bonjour,

Je suis désolé, je n'ai pas de contenu en ligne, la production du site va durer plus de deux mois donc je ne peux pas me permettre !

pour l'image utilisée pour faire le background, il sagit d'un stripe de 6px² répété en x et en y,

l'image utilisée pour faire le background-top est un dégradé (superposant le motif de base) de 96px de haut sur 6px de large répété en x seulement, les motifs s'emboitent sans soucis en zoom 100%.

Je n'ai pas d'image de mon exemple, j'ai opté pour une autre option pour le moment, mais l'effet recherché est sensiblement le même, voici une image de ce que j'ai actuellement :

http://img509.imageshack.us/img509/8743/topne1.png

Le trait noir, c'est le haut de la page (ui navigateur), il y a donc mon dégradé en haut de la page qui se répète, ce que je désirais, c'est que le background de la page apparaisse dans la zone blanche (jusque là, aucun problème), j'avais donc deux solutions, soit passer par une image de fond dans le body, en faisant ainsi il n'y avait pas de soucis de chargement sous ie, par contre lorsque je zoomais la page, le background restait fixe tandis que le background_top était aggrandi, jusque là c'est normal vu qu'il sagit d'un bug connu d'internet explorer qui n'aggrandit pas l'élément de fond suite à un zoom... Donc j'ai décidé de passer par une autre méthode : créer une div de fond, comme je l'ai fais pour afficher le dégradé, cependant lorsque j'affiche le résultat sous internet explorer, le navigateur met 3-4 secondes à charger la page car il recharge à chaque fois la petite image de 6px², mais cela semblerait également venir d'un bug d'internet explorer, j'ai donc décidé d'abandonner cette alternative pour le moment, en espérant que quelqu'un ait la solution, ou bien que je tombe dessus au hasard de mes recherches.

Cependant si vous avez des remarques, des analyses, des questions à faire, je reste à votre écoute, en espérant que nous trouvions une solution à ce problème.


Tu dis que les options que j'ai prise pour intégrer mon design te semblent douteuses, que veux tu dire par là ? au niveau du code ? ou mes choix de mise en page ? J'ai réfléchi et je n'ai pas trouvé d'autre moyen css valide de créer un arrière plan en 9-scale-grid, et c'est en fait le but que je recherche au final.

circle a écrit :
Tu dis que les options que j'ai prise pour intégrer mon design te semblent douteuses, que veux tu dire par là ? au niveau du code ? ou mes choix de mise en page ?

Je parle du code (intégration) et non pas des choix de mise en page (design).
J'avais l'impression de choix d'intégrations pas très robustes ou excessivement compliqués, mais sans voir le design visé (avec autre chose qu'une image microscopique) et le code produit (avec une page en ligne), je ne peux pas en dire plus.

circle a écrit :
un arrière plan en 9-scale-grid

À tes souhaits.
Si tu parles d'un conteneur étirable en hauteur et en largeur, en français ça se dit: «conteneur étirable en hauteur et en largeur».
Modifié par Florent V. (02 Aug 2008 - 16:04)

Bonjour,

J'ai eu le même problème il y a peu. En fait FF semble intégrer une sorte de cache quand il s'agit de répéter l'image à l'infini (et au delà...); IE, non. Utilise une image plus grande (genre 100 ou 300px²) vu que les couleurs se répètent en compression .gif la taille de l'image restera raisonnable.
Modifié par Yasashii (02 Aug 2008 - 16:15)

Ok, c'est ce que je pensais Yasashii, merci pour ta contribution ! Le fait de passer par une image de plus grande taille semblerait être la meilleure solution, c'est quand même dommage.

Donc la seule solution qui semble applicable serait d'utiliser une image de plus grande taille (99px² ou 300px² par exemple).

Dommage ! J'espère qu'internet explorer changera ça.