Discussion :

[franculo_caoulene]

Salut,

Afin d'optimiser l'affichage d'un site je precharge des images. Ca ne m'est plus forcément très utile, c'est donc pour ma culture technique. Je me demande comment gérer complètement le chargement des images.
Admettons que j'ai une image plutôt lourde à charger (grosseImage.jpg) et je souhaite la charger en priorité. Est-il possible d'empêcher les autres images de se charger avant grosseImage.jpg. J'ai pas trouvé...

[le_chomeur]

Salut
La méthode la plus sure pour charger les images les unes après les autres est de créer un tableau javascript contenant les url , puis d'utiliser une méthode de load par exemple :

var MesImgs = new Array(...);
var index = 0;

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
function loadMyImg(){
if(MesImgs[index].complete){
if(index <= MesImgs.length){
index++
window.setTimeout( "loadMyImg()", '50' );
}
}
else{
window.setTimeout( "loadMyImg()", '50' );
}
}

voila de tete , tu peux également utiliser la gestion des erreurs de chargement d'image ( onerror il me semble )
Bon courage

[franculo_caoulene]

Je fais déjà quelque chose dans le genre :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
var imgload = preload(['img/fond.png',
			'img/fondconteneur.png',
			'img/logo.png',
			'img/separateur.png',
			'img/intro.png']);
var preload = function(im) {
	var imgload = new Array();
	for (i=0; i<im.length; i++) {
		imgload[i] = new Image();
		imgload[i].src = im[i];
	}
	return imgload;
}

Seulement je le fais après le chargement du DOM et du CSS. Des images sont donc déjà chargées avant l'exécution du mon script.

[le_chomeur]

en fait il manque une étape :

Code :

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

1
2
3
4
5
6
7
8
9
 
var preload = function(im) {
	var imgload = new Array();
	for (i=0; i<im.length; i++) {
		imgload[i] = new Image();
		imgload[i].src = im[i];
	}
	return imgload;
}

tu t'occupes de faire une boucle créant toute les images, mais a aucun moment tu n'attends le chargement complet de chaque image , de plus tu peux une fois ces images chargées, les envoyés dans leur position respectives via une autre fonction ...

En gros :
- remplacer les images par UNE SEUL temporaire, et au fur et a mesure qu'elle sont complètement chargées , remplacé les temporaires par les définitives, est ce que j'ai été assez clair ?

sinon je t'enverais un script complet

[franculo_caoulene]

tu t'occupes de faire une boucle créant toute les images, mais a aucun moment tu n'attends le chargement complet de chaque image

Tu insinues que la boucle continue sans finir de charger l'image et donc finalement mes images ne sont pas chargées?

de plus tu peux une fois ces images chargées, les envoyés dans leur position respectives via une autre fonction ...
En gros :
- remplacer les images par UNE SEUL temporaire, et au fur et a mesure qu'elle sont complètement chargées , remplacé les temporaires par les définitives, est ce que j'ai été assez clair ?

Pas compris... en effet!

Mon problème de base, je le rappelle ou le définis mieux, est que des images définies dans le css ou le html se chargent avant le préchargement javascript. Aujourd'hui, mon javascript s'exécute après le chargement du DOM et laisse donc le temps à certaines images de se charger. Y a-t-il un moyen de contrôler ça de A à Z?

[le_chomeur]

je te montrerais demain ( journée de boulot finit ) mais :

Citation:
Envoyé par le_chomeur Voir le message
tu t'occupes de faire une boucle créant toute les images, mais a aucun moment tu n'attends le chargement complet de chaque image
Tu insinues que la boucle continue sans finir de charger l'image et donc finalement mes images ne sont pas chargées?

oui

[franculo_caoulene]

Bon après trois mois de parenthèses je reviens sur ce sujet (dois-je encore dire bonjour?).

Un préchargement est mis en place et se déroule correctement. Pourtant arrivé sur la page concernée par l'image celle-ci se charge à nouveau de temps en temps. Sans que j'ai pu définir une règle pour résoudre le bug.

Voici le code, une partie est faite en utilisant jQuery, mais c'est accessoire. La partie posant à priori problème concerne preload et waitload.
La partie jQuery s'occuper de charger du code html pour l'insérer dans cette page. C'est dans ce code html que se trouve l'image.

Code javascript :

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
<head>
    <title>Test Preload</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <style type="text/css">
 
    </style>
    <script src="js/jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
    <!--
	var Test = {
 
		preload: function(img) {
			var imgLoad = [];
			for (i=0; i<img.length; i++) {
				imgLoad[i] = new Image();
				imgLoad[i].src = img[i];
				Test.waitload(imgLoad[i]);
			}
			return imgLoad;
		},
 
		waitload: function(obj) {
			var tmp = setInterval(function() {
				if(typeof obj=="object") {if(obj.complete) clearInterval(tmp);}
			},1)
		},
 
		regexp: /([:\/\w]*index\.php\?p=)(\w)/gi,
 
		click: function(e) {
			$(e).click(function() {
				var content = $(this).attr("href").replace(Test.regexp, "$2");
				if ($(this).attr("target")==undefined) {
					$("#content > div").fadeOut("fast", function() {
						$("#content > div").load(content +".html #"+ content, function() {
							$("#content > div").fadeIn("slow");
						});
					});
					return false;
				}
			});
		}
	}
 
	jQuery(function($) {
		var imgLoad = Test.preload(['img/fond.jpg']	);
		Test.click("a");
	});
	//-->
    </script>
</head>
<body>
	<div id="container">
		<a href="index.php?p=content2" title="to content 2">to content 2</a></li>
		<div id="content">
			<div id="contentintro">
				<p>content 1</p>
			</div>
		</div>
	</div>
</body>
</html>

Code xhtml :

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

1
2
3
4
<div id="content2">
	<p>Un contenu quelconque...</p>
	<img src="img/fond.jpg" alt="raté!" />
</div>

Si vous voulez tester, tous les fichiers se trouvent dans l'archive. Vous n'avez qu'à cliquer sur index.html. Le mieux est tout de même de tester sur un serveur distant pour les temps de réponse.
Je rappelle que le problème arrive irrégulièrement si je me fie à firebug.

Si vous avez une quelconque solution ou explication qui me ferait avancer, je suis preneur.

Merci encore par avance.

PS: j'ai fait exprès de prendre une grosse image.

[le_chomeur]

effectivement ça faisait un moment

Voici le code, une partie est faite en utilisant jQuery, mais c'est accessoire. La partie posant à priori problème concerne preload et waitload.
La partie jQuery s'occuper de charger du code html pour l'insérer dans cette page. C'est dans ce code html que se trouve l'image.

quel est le comportement ? je ne peux tester sur un serveur distant ...

le principe est tout de même celui que j'avais décris il y a plusieurs mois as tu tester la méthode que j'avais donnée ??

[franculo_caoulene]

Est-ce que j'ai testé ta solution, bah non cf. les citations

En gros :
- remplacer les images par UNE SEUL temporaire, et au fur et a mesure qu'elle sont complètement chargées , remplacé les temporaires par les définitives, est ce que j'ai été assez clair ?

Pas compris... en effet!

Je fais bien une temporisation mais pourquoi remplacer qu'une image, plutôt que différentes images?

Quant au comportement, firebug me montre que de temps en temps une requête se fait sur l'image et la charge donc en arrivant sur la page et de temps en temps non, l'image est bien en cache!

[le_chomeur]

en fait c'était la première version, celle ci :

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
 
var imgload = null ;
function loadMyImg(){
if(MesImgs[index].complete){
if(index <= MesImgs.length){
index++
imgload = new Image();
imgload.src = MesImgs[index];
window.setTimeout( "loadMyImg()", '50' );
}
}
else{
window.setTimeout( "loadMyImg()", '50' );
}
}

devrait répondre au problème :

- on lance le chargement d'une image
- tant qu'elle n'est pas chargé, on ne passe pas à la suivante
- sinon on charge la suivante.

[franculo_caoulene]

Je n'avance pas, j'ai adapté ton code et les images se rechargent systématiquement dorénavant. Je l'ai peut-être mal adapté tu me diras!

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
var Test = {
	imgLoad: new Image(),
 
	imgList: [],
 
	index: 0,
 
	preload: function() {
		if (Test.imgLoad.complete || Test.index==0) {
			if (Test.index<Test.imgList.length) {
				Test.imgLoad = new Image();
				Test.imgLoad.src = Test.imgList[Test.index];
				Test.index++;
				setTimeout(function() {
					Test.preload();
				}, 50);
			}
		} else {
			setTimeout(function() {
				Test.preload();
			}, 50);
		}
	}
}

Je fournis les images à charger dans imgList.
Voici une copie d'écran de firebug montrant des images préchargées puis chargées à nouveau. On y voit fondcontact.jpg et boutoncontactrepos.png apparaître deux fois.

Qu'est-ce que je rate? Qu'est-ce que je ne comprends pas?

Merci déjà pour ta persévérance le_chomeur