Discussion :

[Mister Paul]

Bonjour,

je voudrais utiliser un script basique de diaporama basé sur Mootools 1.2 (cette version car elle est déjà chargée dans le site).
J'ai vu le code suivant sur cette page :

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
 
window.addEvent('domready',function() {
	/* settings */
	var showDuration = 3000;
	var container = $('slideshow-container');
	var images = container.getElements('img');
	var currentIndex = 0;
	var interval;
	/* opacity and fade */
	images.each(function(img,i){ 
		if(i > 0) {
			img.set('opacity',0);
		}
	});
	/* worker */
	var show = function() {
		images[currentIndex].fade('out');
		images[currentIndex = currentIndex < images.length - 1 ? currentIndex+1 : 0].fade('in');
	};
	/* start once the page is finished loading */
	window.addEvent('load',function(){
		interval = show.periodical(showDuration);
	});
});

Le souci c'est que j'ai 200 images à charger. Et si j'attends le chargement complet des images pour déclencher le diaporama, on attend très longtemps... (quelques images d'avance ça serait OK mais toutes, c'est trop long…)

J'ai bien essayé de sortir interval = show.periodical(showDuration); du window.addEvent('load', mais ça ne fonctionne pas.

Comment faire ça ?

[ticroch]

Cette ligne ne serait pas fausse ?

Code :

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

1
2
 
var container = $('slideshow-container');

La tu sélectionnes tout les tags slideshow-container ... Je suppose que tu veux sélectionner avec l'identifiant, donc :

Code :

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

1
2
 
var container = $('#slideshow-container');

Ensuite, je sais pas si c'est une solution à ton probleme, mais les évenement load() tu peux aussi les utiliser sur des images si je me rappelle bien, un truc comme ca :

Code :

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

1
2
3
4
5
 
var images = container.find('img');
images.ready(function() {
    // S'exécute quand l'image est finie de charger, la hauteur et la largeur sont donc connues
});

Et dernièrement, si c'est un simple diaporama que tu veux faire, il y a vraiment une tonne de plugins qui permettent de le faire en un minimum de ligne. Par exemple jQuery Carousel, dessus tu peux indiquer combien d'images doivent être préchargée !

[Mister Paul]

Ah je suis embêté pour te répondre…

Je ne sais pas s 'il y a une erreur dans le script mais il semble tourner sans problème depuis pas mal de temps (il vient de là)
Je n'ai pas réussi à utiliser ton images.ready(function() {

Pour JQuery, je souhaitais éviter de l'utiliser dans la mesure où le site utilise déjà Mootools 1.2...

[ticroch]

Ok désolé pour mes réponses, en voyant le $ j'ai cru que c'était du jQuery... donc tout ce que j'ai dit est faux, et je ne connais pas mototools donc je ne peux pas trop t'aider....

Bonne chance

[vermine]

Bonjour,

Le sélecteur ainsi définit recherche un id.

Code :

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

var container = $('slideshow-container');

Le "#" sert à préciser une class.

Je n'ai malheureusement pas de réponse à la question. Que donne un .get('tag') d'une image non encore chargée ?

[Mister Paul]

Je n'ai malheureusement pas de réponse à la question. Que donne un .get('tag') d'une image non encore chargée ?

Aucune idée... Comment faire pour te répondre ?