Chargement des images background

**guigo** · 22/02/2010, 10h21

Bonjour,
Je voulais savoir si il y avait une technique autre que les fichiers strike css pour charger en une seul requête http les images "background" de mon fichier externe css ?
J'avais lu un article (mais impossible de le retrouver) ou un fichier css externe était appelé avec en paramètre toutes les images du background.... A priori cela limité le nombres de requêtes http nécessaires au chargement du css. Avez vous entendu parlé de ca ?

Merci,
Guigo

**Ethyde** · 22/02/2010, 11h13

Bonjour,

tu dois parler de ce genre de choses :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
#preloadedImages {
       width: 0px;
       height: 0px;
       display: inline;
       background-image: url(path/to/image1.png);
       background-image: url(path/to/image2.png);
       background-image: url(path/to/image3.png);
       background-image: url(path/to/image4.png);
       background-image: url();
}

Mais cela ne change rien au nombre de requêtes, cela permet juste de charger les images un peu plus tôt.

Mais si tu tiens à pousser l'optimisation sur le chargement des images de background je te conseil de regarder aussi (surtout) du coté des Sprites css

**guigo** · 22/02/2010, 11h17

Ah oui je voulais dire "Sprite" CSS et non strike css désolé.

Ce preload fait gagner des requêtes http du coup ?

Tu colles ce code dans ton css ou dans le <head> ?

Merci

**Ethyde** · 22/02/2010, 11h24

Envoyé par guigo

Ce preload fait gagner des requêtes http du coup ?

non aucune

Envoyé par guigo

Tu colles ce code dans ton css ou dans le <head> ?

en debut de css où quelle soit

**guigo** · 22/02/2010, 12h56

du coup quelle est l'intérêt de faire un preload ?

L'article que j'avais lu parlé d'une technique différente. L'appel des images background se faisait dans le <head>. De loin ca pouvait ressembler a ca :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<link href= "./monfichier.css(monimage.jpg|ton_image.gif|...)" rel="stylesheet" type="text/css" />

Du coup nous avions une seule requête http pour charger l'ensemble des images background ! Donc on ne gagne pas en poids mais en nombre de requêtes...

est ce que cela vous parles ?

Merci

**Ethyde** · 22/02/2010, 13h43

Envoyé par guigo

du coup quelle est l'intérêt de faire un preload ?

L'intérêt c'est de faire charger tes images avant la fin du chargement du reste

Envoyé par guigo

L'article que j'avais lu parlé d'une technique différente. L'appel des images background se faisait dans le <head>. De loin ca pouvait ressembler a ca :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<link href= "./monfichier.css(monimage.jpg|ton_image.gif|...)" rel="stylesheet" type="text/css" />

Du coup nous avions une seule requête http pour charger l'ensemble des images background ! Donc on ne gagne pas en poid mais en nbre de requêtes...

Hum non je connais pas cette version (et je doute que ça soit très "naturel", donc passage par un script ? ). Et je doute, mais a voir, que ca réduise vraiment le nombre de requêtes : bien quand une seul requête ils restent, les fichier images, chargé individuellement.

**thelvin** · 22/02/2010, 14h39

Envoyé par Ethyde

non aucune

?

Je croyais que le principe des CSS sprites était de coller bout-à-bout plusieurs images de même taille pour en faire une grande image, puis de faire afficher juste la partie qu'on veut voir de cette grande image.

L'intérêt étant que si l'une des images est affichée, en réalité elles ont toutes été récupérées. Du coup, si la grande image contient n petites images, on récupère n images en seulement 1 requête http. Ce n'est pas ça ?

**guigo** · 22/02/2010, 15h17

non je dirais que le css sprites est le fait de faire une seule image, notamment pour tes background images.... ensuite tu places tes éléments sur cette image.
L'intérêt est effectivement d'avoir une seule requête http 1.1 (puisqu'une seule image)...

Le preload est donc intéressant, mais si j'ai beaucoup d'images l'internaute attend sans rien avoir a l'écran je suppose ? est ce vraiment mieux !????

Merci en tout cas pour ces réponses. Je ne clôture pas ce post car je compte bien revenir avec l'article en poche... je me met en mode recherche :-)

**Macmillenium** · 22/02/2010, 18h41

Envoyé par Ethyde

tu dois parler de ce genre de choses :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
#preloadedImages {
width: 0px;
height: 0px;
display: inline;
background-image: url(path/to/image1.png);
background-image: url(path/to/image2.png);
background-image: url(path/to/image3.png);
background-image: url(path/to/image4.png);
background-image: url();
}

Mais cela ne change rien au nombre de requêtes, cela permet juste de charger les images un peu plus tôt.

Avec ce code tu ne fais que surclasser la valeur du background-image, finalement le navigateur ne charge que la dernière image

Pour faire un preload il y a deux solutions : JavaScript ou appeler les images dans le code HTML et les masquer via display:none.

Envoyé par thelvin

Je croyais que le principe des CSS sprites était de coller bout-à-bout plusieurs images de même taille pour en faire une grande image, puis de faire afficher juste la partie qu'on veut voir de cette grande image.

L'intérêt étant que si l'une des images est affichée, en réalité elles ont toutes été récupérées. Du coup, si la grande image contient n petites images, on récupère n images en seulement 1 requête http. Ce n'est pas ça ?

C'est ça.

guigo, si tu veux réduire le nombre des requêtes HTTP il faut passer par les sprites CSS, le preload n'est pas fait pour ça.

**guigo** · 23/02/2010, 11h45

merci a tous

Chargement des images background

CSS

Vue hybride

Discussions similaires

Partager

Partager