image chargée en css

[indigene]

Bonjour,

J'ai une image de fond qui est appelée depuis un style css
Pour les différentes sections de mon site je voudrais charger une image différente

Deux solutions :
1) Créer plusieurs classes différentes dans le même css avec chacune leur propre image et dans les pages html utiliser la classe qui correspond à la section
2) Créer plusieurs fichiers css avec une classe unique mais qui fait référence à une image différente suivant le fichier css. Et dans les pages html appeler un fichier css différent pour chaque section.

Les avantages de la première solution : un seul fichier css pour tout le site
Les inconvénients : j'ai peur que toutes les images ne soient chargées, même celles qui correspondent à des classes qui ne sont pas utilisées dans la page. Ca ferait donc très lourd à charger au premier accès

Les avantages de la seconde solution : une seule image dans le css donc une seule image chargée à l'ouverture de la page
Les inconvénients : devoir maintenir plusieurs fichiers css presque identiques avec dans chacun une seule différence, l'url de l'image

Pouvez-vous me confirmer si les images appelées depuis un css sont toutes chargées à l'ouverture ou bien si elles ne sont chargées que quand on les utilise réellement au sein de la page via la classe concernée ? La réponse orientera mon choix.

Voici le code que j'ai actuellement dans le fichier css :

#content{border-radius:0 0 0 0;-webkit-box-shadow:none;box-shadow:none;border-style:none;padding-top:8px;background:none;background:hsl(0,0%,0%) url(image-rouge.gif) no-repeat scroll center top;background-size:90%;}
#contentb{border-radius:0 0 0 0;-webkit-box-shadow:none;box-shadow:none;border-style:none;padding-top:8px;background:none;background:hsl(0,0%,0%) url(image-blanche.gif) no-repeat scroll center top;background-size:90%;}
#contentn{border-radius:0 0 0 0;-webkit-box-shadow:none;box-shadow:none;border-style:none;padding-top:8px;background:none;background:hsl(0,0%,0%) url(image-noire.gif) no-repeat scroll center top;background-size:90%;}
#contentj{border-radius:0 0 0 0;-webkit-box-shadow:none;box-shadow:none;border-style:none;padding-top:8px;background:none;background:hsl(0,0%,0%) url(image-jaune.gif) no-repeat scroll center top;background-size:90%;}
#contentv{border-radius:0 0 0 0;-webkit-box-shadow:none;box-shadow:none;border-style:none;padding-top:8px;background:none;background:hsl(0,0%,0%) url(image-verte.gif) no-repeat scroll center top;background-size:90%;}

Bien sur chaque page utilise qu'une seule image de fond.
Les images de fond pèsent environ 130 ko
Le fichier css fait 12 ko

 

[loubet]

la console de ton navigateur permet de savoir quelles sont les ressources qui sont chargées, donc de répondre à ton interrogation.

 

[indigene]

merci pour la réponse.
Mais je n'utilise pas tous les navigateurs. Et par exemple dans IE je n'ai pas trouvé ce qui pourrait ressembler à une console. Et dans Firefox j'ai la liste des médias de la page mais je ne suis pas certain que c'est seulement les médias chargés. Il peut y avoir plus de médias chargés, bien que non utilisés dans la page. Et dans ce cas il ne m'affiche que les médias utilisés.
En fait la réponse n'est pas claire.

Je tourne donc la question dans un autre sens :
Les médias décrits dans les css sont-ils chargés d'une manière générale (quel que soit le navigateur) seulement au moment où on les utilise réellement ou une fois pour toute au chargement du script css ?

 

[Marie-Aude]

Pouvez-vous me confirmer si les images appelées depuis un css sont toutes chargées à l'ouverture ou bien si elles ne sont chargées que quand on les utilise réellement au sein de la page via la classe concernée ? La réponse orientera mon choix.

Bien sûr que non qu'elles ne sont pas toutes chargées à l'ouverture du fichier. C'est pas compliqué à vérifier, tu fais un css avec une image non enregistrée et tu testes ce qui est chargé avec un outil comme yslow ou autre.

 

[indigene]

Merci beaucoup !
Donc c'est correct tel que j'ai codé