Préchargement des images

**John Vass** · 11/09/2012, 14h49

Salut !

Oui oui, je sais ! C'est probablement une question bien facile qu'on devrait pouvoir trouver en cherchant un peu... Sauf que je cherche comme un dingue et chaque post que je trouve parle toujours de cas particulier avec des foules de fonction en plus, ce dont je n'ai pas besoin pour le moment...

Donc, tant pis, je la pose quand même.
Comment précharger une image ? Parce que j'ai une image de fond qui pèse un peu lourd sur ma page internet et que je ne veux pas la pourrir en réduisant sa qualité ! !

Sachant qu'après, pour la suite, il faudra que j'en précharge plusieurs !

Merci !

**SpaceFrog** · 11/09/2012, 15h44

en background image ?
ça en se preloade pas ...

**thelvin** · 11/09/2012, 16h29

Précharger à partir de quand ? Le navigateur ne va pas deviner qu'il doit afficher cette page, avant que visiteur ne lui dise d'y aller.
Et une fois que le visiteur veut aller sur cette page, il n'y a rien à précharger, il faut charger tout court.

**SpaceFrog** · 11/09/2012, 16h33

On peut faire des preload d'images si celle-ci font l'objet d'une balise src sur la page.
Celà permet de charger des images en arrière plan avant de les afficher (modification dynamique de src avec js)

**Bovino** · 11/09/2012, 16h34

Il existe toutefois l'attribut rel="prefetch" de la balise <link /> (prerender sur Chrome) qui permet d'indiquer que le fichier lié est destiné à être mis en cache pour la (ou les) page(s) suivante(s)

**John Vass** · 11/09/2012, 17h17

On ne peut pas faire en sorte de précharger une image avant de la coller en background image sur une div avec un évènement de type Click, par exemple ?
Parce que j'ai mis en place un changement de background, qui joue avec quelques images, et j'aimerai les précharger pour éviter les bugs d'affichage du style "image pas encore chargé au moment de l'apparition de la div"...

**SpaceFrog** · 11/09/2012, 17h22

non pas en background image...
pas à ma connaissance

**Bovino** · 11/09/2012, 17h36

Heu... si

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>Image de fond</title>
	<style>
		#bgImage{
			height: 600px;
			border: 2px solid gold;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<div id="bgImage"></div>
	<div id="log"></div>
	<script>
		var bgImage = new Image();
		bgImage.onload = function(){
			document.getElementById('log').innerHTML = 'Image chargée, cliquer sur la div pour l\'afficher...';
			document.getElementById('bgImage').onclick = function(){
				this.style.backgroundImage = 'url(http://cyberzoide.developpez.com/misc/background13b-1600x1200.jpg)';
			};
		};
		bgImage.src = 'http://cyberzoide.developpez.com/misc/background13b-1600x1200.jpg';
	</script>
</body>
</html>

Fonctionne correctement avec FF, Chrome, Opera, Safari et IE (enfin, en version 9)

**John Vass** · 13/09/2012, 10h47

Ok...
Et bien, je vais essayer de mettre çà en application et l'adapter à mes besoins, ça va pas être facile, cela dit... Je marquerai ce post comme résolu si j'y parviens...
Je vous tiens au jus !

**thelvin** · 13/09/2012, 13h37

C'est rien d'autre que du préchargement d'image parfaitement habituel, sauf que l'Image reste invisible et qu'on utilise son href dans le style background-image au lieu d'une balise <img>.

Si on sait faire du préchargement d'image, on sait faire ça.

**SpaceFrog** · 13/09/2012, 13h45

Oui ... enfin en général une image en background n'est pas affichée de façon différée, a moins qu'elle en soit sur un élément qui n'est pas visible au chargement.
Du coup je ne vois pas l'interet de faire du preload sur des image en background

**Bovino** · 13/09/2012, 13h53

Si j'ai bien compris, il s'agit de pouvoir modifier l'image de fond à un moment donné, parce que sinon, le préchargement n'a vraiment aucun sens...

**SpaceFrog** · 13/09/2012, 14h33

du coup est ce que juste une class specifique par background ne suffit pas ...

**John Vass** · 14/09/2012, 09h35

Pour répondre à la question de Bovino, oui, mon but est de faire changer d'image de background à un moment spécifique (un changement de rubrique, par exemple). Et le mieux, c'est que les images, qui font une certain poids quand même, puissent apparaître avec un fondu, après s'être chargé. mais je me demandais si précharger ces images pour éviter qu'il aient à le faire au moment où on les appelle dans la page, serait pas une meilleure idée.

**pomeh** · 15/09/2012, 19h28

Effectivement, tu as juste besoin de faire précharger l'image par le navigateur. Il existe plein de techniques pour faire cela, avec ou sans JavaScript.

La version 100% JS la plus simple se résume à:

Code :

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

new Image().src = 'http://tonsite.com/tonimage.jpg';

La version CSS + HTML la plus simple semble être:

Code :

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

1
2
3
4
5
<style>
#preload { background: url(http://tonsite.com/tonimage.jpg) no-repeat -9999px -9999px; }
</style>
 
<div id="preload"></div>

**John Vass** · 18/09/2012, 11h26

Je vois pour déterminer la méthode la plus approprié... Vu que les images sont assez lourdes...
Je fais des essais et je reviens vers vous !

**John Vass** · 28/09/2012, 10h46

Bon, bah, pour le moment, je galère...
ET pas qu'un peu, pour ainsi dire, j'ai essayé diverses manip avec les quelques bouts de code que vous m'avez filé, et ce na marche pas du tout ! Et j'y ai passé quelques heures, hier, quand même ^^
Bon, il est possible que j'aie fait carrément n'importe quoi ! Après tout, je débute ! Voici le chef d’œuvre... -_-

Code :

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

1
2
3
4
5
6
7
8
9
10
 
$('#background_page').animate({opacity:0}, 250, function(){	// On rend la page invisible, et on lance le reste de la fonction.
 
// On charge d'abord l'image et ensuite, on l'insère dans le background
	var bgImage = new Image();
	bgImage.onload = function(){
		$('#background_page').css("background-image", "url(" + bgImage.src + ")");	// On appelle la nouvelle image de background
	};
	bgImage.src = adresseImageBackground; // adresseImagebackground est le nom d'une variable qui stocke une adresse générée dynamiquement
});

Ce que je veux faire :
- Rendre la div invisible (çà, c'est bon..)
- Charger l'image de fond, qui pèse la bagatelle de 180 Ko en moyenne (Oui, c'est du lourd...), et ensuite je le place en background dans ma div #background page.
- Et après çà, je veux exécuter ces trois instructions afin de compléter l'animation

Code :

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

1
2
3
4
 
$('header img').attr("src", adresseImageLogo); // adresseImageLogo contient une adresse d'image générée dynamiquement.
$('header, #nav_et_log, #zone_contenu, footer').css("backgroundColor", codeCouleur); // codeCouleur contient un code couleur choisi par un switch.
$('#background_page').animate({opacity:1}, 250); // L'idéal serait que cette instruction soit lancé lorsque tout est fait, mais je veux surtout que l'image de background ne soit pas en train de se charger en même temps (ce qu'il me fait, à ce stade de développement )

Je suis là, s'il y a des détails qui coincent. Merci à ceux qui m'aideront !

**John Vass** · 28/09/2012, 14h46

C'est bon, le bug est résolu !
En fait, j'ai vraiment fait une ânerie !

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
$('#background_page').animate({opacity:0}, 250, function(){	// On rend la page invisible, et on lance le reste de la fonction.
 
// On charge d'abord l'image et ensuite, on l'insère dans le background
	var bgImage = new Image();
	bgImage.onload = function(){
		$('#background_page').css("background-image", "url(" + adresseImageBackground + ")");	// On appelle la nouvelle image de background
		$('header img').attr("src", adresseImageLogo); // adresseImageLogo contient une adresse d'image générée dynamiquement.
		$('header, #nav_et_log, #zone_contenu, footer').css("backgroundColor", codeCouleur); // codeCouleur contient un code couleur choisi par un switch.
		$('#background_page').animate({opacity:1}, 250); // L'idéal serait que cette instruction soit lancé lorsque tout est fait, mais je veux surtout que l'image de background ne soit pas en train de se charger en même temps (ce qu'il me fait, à ce stade de développement )
	};
	bgImage.src = adresseImageBackground; // adresseImagebackground est le nom d'une variable qui stocke une adresse générée dynamiquement
});

Première chose, mettre bgImage.src dans l'appel pour css était une bourde monumentale. Ca a fichu en l'air la fonction entière de préchargement !

Et deux, l'adresse générée pour adresseImageBackground était realtive, et il semble que la fonction ne la digère pas. j'ai mis une adresse d'image complète, et ca marche ! Voilà ! Quand aux trois instructions pour l'animation, j'ai tout mis dans la fonction, et ca marche nickel...
Bon, j'en ai bavé, mais c'est fait !

Mais c'est pas fini, j'aurai de l'AJAX à pondre, donc il se peut que je passe dans le coin d'ici peu !

Tchao

Préchargement des images

JavaScript

Discussions similaires

Partager

Partager