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