Discussion :

[Lost In Translation]

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

[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...

[Lost In Translation]

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 :

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
 
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);
	},

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 ?

[Bovino]

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...

[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

[Bovino]

Ou par exemple, mais il existe d'autres exemples sur le forum, d'où l'intérêt de la fonction recherche !

[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é.

[Bovino]

Désolé, mais je n'ai jamais utilisé mootools, donc ça va être compliqué pour moi de t'aider dans ce sens là...

[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

[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...

=)