Pre-load image

Version imprimable

16/12/2008, 19h14
Lost In Translation

Pre-load image

Bonjour à tous,

J'ai un pré-load d'image sur le site : anathea

Dans la page "collection", si le cache est vide, ou que la page est rechargée (f5 ou ctrl+r), les images s'affichent d'abord dans un cadre bleu avant que le pré-load prenne la main.

C'est fort laid et problématique.

Auriez-vous une idée ?

Merci
17/12/2008, 16h04
Bovino

D'abord, ta page ne fonctionne pas avec FF (2 du moins).
Ensuite, le but d'un preload est de charger des images sans les afficher, soit avec un display none, soit un z-index négatif, soit en créant les éléments image sans les insérer dans la page.
Cependant, je n'ai pas vu sur ta page comment tu fais ton preload, donc si tu pouvais montrer un peu ton code...

J'utilise le plugin Mooflow.

Le MF intègre une fonction de préload qui à priori n'est pas heureuse.

Je suppose que c'est gérer par ces 4 fonctions (au vue de leur nom)

Code:

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
 
addLoader: function(){
		this.MooFlow.store('height', this.MooFlow.getSize().y);
		this.loader = new Element('div',{'class':'loader'}).inject(this.MooFlow);
		new Fx.Tween(this.MooFlow, {
			'duration': 800,
			'onComplete': this.preloadImg.bind(this)
		}).start('opacity', 1);
	},
 
	preloadImg: function(){
		this.loadedImages = new Asset.images(this.getMooFlowElements('src'), {
			'onComplete': this.loaded.bind(this),
			'onProgress': this.createMooFlowElement.bind(this)
		});
	},
 
	createMooFlowElement: function(counter, i){
		var obj = this.getCurrent(i);
		var img = this.loadedImages[i];
		obj['width'] = img.width;
		obj['height'] = img.height;
		img.removeProperties('width','height');
 
		obj['div'] = new Element('div').setStyles({
			'position':'absolute',
			'display':'none',
			'height': this.MooFlow.getSize().y
		}).inject(this.MooFlow);
		obj['con'] = new Element('div').inject(obj['div']);
		img.setStyles({'vertical-align':'bottom', 'width':'100%', 'height':'50%'});
		img.addEvents({'click': this.clickTo.bind(this, i), 'dblclick': this.viewCallBack.bind(this, i)});
		img.inject(obj['con']);
 
		new Element('div').reflect({ 'img': img,
			'ref': this.options.reflection,
			'height': obj.height,
			'width': obj.width,
			'color': this.options.bgColor
		}).setStyles({'width':'100%','height':'50%','background-color': this.options.bgColor}).inject(obj['con']);
 
		this.loader.set('text', (counter+1) + ' / ' + this.loadedImages.length);
	},
 
	loaded: function(){
		this.index = this.options.startIndex;
		this.iL = this.master.images.length-1;
		new Fx.Tween(this.loader, {
			'duration': 800,
			'onComplete': this.createUI.bind(this)
		}).start('opacity', 0);
	},

Citation:

D'abord, ta page ne fonctionne pas avec FF (2 du moins).

Arf, depuis que je suis passé à FF3... j'n'ai plus le 2... Pareil pour IE6...
Et j'n'arrive pas à mettre la main dessus ...

Pourrais-tu me faire une capture de ce que tu vois sous FF2 ?

17/12/2008, 16h15
Bovino

Citation:

Envoyé par Lost In Translation

Pourrais-tu me faire une capture de ce que tu vois sous FF2 ?

Pas besoin de capture, la page se bloque sur le loader et rien n'apparait...
17/12/2008, 16h21
Lost In Translation

Oh... euh... Donc à priori c'est le plugin Mooflow qui pose un problème avec Firefox 2 ?

Sous IE6, on m'a dit que "hormis le fait que j'ai des soucis avec tout ce qui est transparent (l'aile qui bouge, les boutons) et la réflexion... ça semble aller"...

sauf bien sûr ce gros problème de préloader...

Serait-il judicieux, de rajouter un autre façon de préloader ?
Genre comme ça => Preload javascript - blog jkconception
17/12/2008, 16h31
Bovino

Ou par exemple, mais il existe d'autres exemples sur le forum, d'où l'intérêt de la fonction recherche ! ;)
17/12/2008, 17h03
Lost In Translation

Mais c'est qu'à la base, je pensais qu'il était possible de faire une modif dans le code même du plugin mootools et non pas de rajouter une couche à tout ça.

C'est pour ça que j'ai posté.
17/12/2008, 17h08
Bovino

Désolé, mais je n'ai jamais utilisé mootools, donc ça va être compliqué pour moi de t'aider dans ce sens là... :oops:
17/12/2008, 17h32
Lost In Translation

J'comprends bien.

Moi même j'utilise mootools, je regarde toujours les codes, j'essaye de comprendre...

Maintenant, même quand je comprends, j'ai du mal à améliorer/modifier... j'maitrise pas tout à fait Mootools... et j'ai pas le temps en ce moment de prendre une semaine pour me dire "je vais décomposer Mootools de A à Z".

Le site en question va être présenter vendredi, j'avais pas remarqué la problématique du préload...

Et j'ai eu "le malheur" de découvrir Mootools un peu tard, à 6mois près j'en serais pas vraiment là ^^

Donc si quelqu'un a actuellement les compétences que j'ai pas pour me donner un coup de pouce, j'suis preneur, sinon, solution annexe ^^.

Merci en tout cas de t'être penché sur mon cas Bovino
17/12/2008, 19h46
Lost In Translation

Bon, j'ai réglé mon soucis...

J'ai caché toutes les images par une classe CSS...

Puis j'me suis dit qu'avec la cascade CSS, quand le MooFlow met le display à chaque image, ça écraserait la classe "cacher" que j'ai créé...

Le constat a été vérifié...

Et ça marche =)

J'sais pas si c'est réellement le genre de truc qui s'fait... mais bon... comme le dis mon Ami Perceval : "quand on a pas de technique, on le fait à la zob"

Bon, j'avais essayé de voir pourquoi ça chie sous FF2...

=)