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 ?

[NoSmoking]

Bonsoir,

Le souci c'est que j'ai 200 images à charger.

il te faut peut être revoir la conception et diviser pour mieux régner

[Mister Paul]

Ah la la…
je n'y arrive pas docteur…


Pour moi en enlevant le window.addEvent('load',function(){ et en passant son contenu dans le window.addEvent('domready',function(){ ça devait (presque) fonctionner : on accède à tous les éléments html même si les images ne sont pas téléchargées…

… diviser pour mieux régner… J'ai essayé mais pas comme il devait faloir…

[vermine]

C'est le container qu'il faut diviser.

[Mister Paul]

Ouh la la ce n'est de dire que je patauge…

[NoSmoking]

as tu essayé de ne pas mettre le lancement dans le onload

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
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 */
// OUT  window.addEvent('load',function(){
  interval = show.periodical(showDuration);
// OUT  });
});

[Mister Paul]

Oui c'était bien mon idée à la base, mais elle ne fonctionne pas vraiment :
- le diaporama se lance mais n'est pas visible
- il devient visible seulement quand toutes les images ont été téléchargées (c'est à dire donc en cours de lecture)

Il faudrait qu'il le soit dès le début ou après 3 ou 4 images chargées

[vermine]

D'où l'idée de diviser l'ajout dans le container par bloc de quelques images.

[Mister Paul]

Ben oui c'est bien là que je bute…


Un petit coup de pouce ?…

[Mister Paul]

J'ai essayé un

Code :

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

1
2
3
4
5
6
7
8
9
 
	/* opacity and fade */
	images.each(function(img,i){ 
		if(i > 0) {
			img.set('opacity',0);
		}
		if(i > 5) {
			return true;
		}

en me disant que plus loin je mettrai quelque chose du genre :

Code :

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

1
2
3
4
5
6
 
	/* opacity and fade suite */
	i=6;
	images.each(function(img,i){ 
			img.set('opacity',0);
		}

Mais rien qu'avec la 1ère partie ça ne change rien au téléchargement préalable de toutes les images...

[NoSmoking]

- le diaporama se lance mais n'est pas visible

- le défilement se fait-il, pour vérifier il suffit d'initialiser l'attribut alt des images.
- les images ont-elles une dimension fixée au départ comme dans l'exemple que tu as fournis.

J'ai testé sur ce même exemple et cela à fonctionné.

Une autre approche serait peut être de lancer le diaporama sur le complete de la première image.

Diviser pour mieux régner :
ranger les photos par thème, catégorie, événement que sais je encore...en fait créer plusieurs diaporamas.
Il est quand même ballot de précharger 200 photos pour n'en regarder que quelque une...

[Mister Paul]

- Oui pour moi le défilement se fait bien
- La zone de display est fixe à 800x600. Par contre comme les images ont des tailles différentes, j'ai ajouté un width:800px; au style de #slideshow-container img pour garder une cohérence visuelle

- dans l'exemple, il n'y a que 5 liens, alors évidemment c'est un peu juste pour tester... Ou alors c'est déjà chargé dans le cache. Car pour moi ça recharge l'ensemble (après avoir vidé la cache…).

J'ai suivi ton idée en essayant de lançer le diaporama après que la 1ère image soit chargée (à la place du onload)

Code :

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

1
2
3
4
 
	container.getElement('img').onComplete= function(){
		interval = show.periodical(showDuration);
	};

Mais ça continue à tout télécharger (comme quand j'avais simplement sorti le interval = show.period… du load). Par contre ça ne diffuse plus que la 1ère photo...


Il me faut un seul diaporama avec cette sélection d'images pendant qu'une voix off est lue par ailleurs dans la page...
(si, si, c'est une vraie sélection. Mais tous comptes fait elle est de… 423 images !)

Moi qui pensais avoir trouvé un script simple à customiser…

[NoSmoking]

oncomplete n'est pas forcément une bonne idée, essaies avec onload, cela me paraît plus judicieux

Code :

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

1
2
3
container.getElement('img').onload= function(){
  interval = show.periodical(showDuration);
};

Mais ça continue à tout télécharger (comme quand j'avais simplement sorti le interval = show.period… du load). Par contre ça ne diffuse plus que la 1ère photo...

les images appartenant au document elles sont, quoiqu'il arrive, chargées, pour ne pas avoir à les charger il ne faudrait pas qu'elles soient définies dans le document mais ajouté au fil de l'eau, affichage image n, chargement image n+1 etc...

Il me faut un seul diaporama avec cette sélection d'images pendant qu'une voix off est lue par ailleurs dans la page...
(si, si, c'est une vraie sélection. Mais tous comptes fait elle est de… 423 images !)

quoiqu'il arrive( et de 2) cela va ramer à un moment ou à un autre, pas sûr que tu ais choisi le bon langage

[Mister Paul]

Code :

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

1
2
3
container.getElement('img').onload= function(){
  interval = show.periodical(showDuration);
};

Malheureusement non, la page charge d'abord toutes les images avant de rendre visible le diaporama (en cours de lecture donc).
Evidemment la seconde fois , c'est impeccable.... mais pas la 1ère.

quoiqu'il arrive( et de 2) cela va ramer à un moment ou à un autre, pas sûr que tu ais choisi le bon langage

Tu penses à quel autre langage ?

[NoSmoking]

Malheureusement non, la page charge d'abord toutes les images avant de rendre visible le diaporama (en cours de lecture donc).
Evidemment la seconde fois , c'est impeccable.... mais pas la 1ère.

pas vu cela sur l'essai que j'ai réalisé.

Tu penses à quel autre langage ?

au hasard flash.