11540 sujets

JavaScript, DOM et API Web HTML5

Gérer des actions celon l'état du chargement

Bonjour à tous,
Je suis en train de programmer un slideshow en js, mais j'ai le probléme suivant: quand les images ne sont pas encore chargées le slideshow fonctionne mal, normal me direz vous. Ce que je voudrait donc faire c'est que l'image suivante ne commence à apparaitre qu'une fois qu'elle est chargé, j'ai écrit le code suivant, mais au lieu d'attendre que l'image suivante soit charger il attend que toute les images soient chargées, ce qui est problématique surtout quand il y en à 30...

LoadImage=new Image();
LoadImage.src=MaPhoto.src
Wait();

function Wait(){

   if(WaitLoad.complete){

     mon action

   }else{setTimeout(Wait, 200);}
}


Est ce que complete est bien la solution?
Quelqu'un à t'il une idée?
Modifié par matmat (08 Jan 2007 - 22:33)
En fait ça marche tout simplement comme ça...

function Wait(){
  if(MaPhoto.complete){

  mon action

 }else{setTimeout(Wait, 200);}
}
beh j'y est pensé, mais le principe d'un slide show c'est que ça tourne... ors onload, ce charge qu'une seule fois au moment du chargement. Ou alors il faudrait que je trouve qqchose pour que la premiére fois il y est le onload et la deuxiéme il se charge directement. Mais bon ce serait plus simple avec en verifiant avec "complete", sauf que je ne l'ai jamais utilisé.
matmat a écrit :
beh j'y est pensé, mais le principe d'un slide show c'est que ça tourne... ors onload, ce charge qu'une seule fois au moment du chargement. Ou alors il faudrait que je trouve qqchose pour que la premiére fois il y est le onload et la deuxiéme il se charge directement. Mais bon ce serait plus simple avec en verifiant avec "complete", sauf que je ne l'ai jamais utilisé.
Je ne comprends pas trop ton problème en fait.
var img = new Image();
img.src = "/monimg.jpg";
img.onload = function() {
   // Mon action
};
Ca fonctionne très bien. Mais je n'ai sans doute pas compris ton cas.
matmat a écrit :
Effectivement ton code marche, mais je ne sais pas pourquoi, pas sur IE.
C'est bizarre, j'ai déjà utilisé cette méthode avec succès sous IE. Est-ce que tu as un exemple simple de code qui ne marche pas ?
voilà le code actuel:


	if(imgs[0].complete){

        imgs[0].style.display = 'inline';
	  if(largeur<900){imgs[0].style.height = '300px';}
          else{imgs[0].style.height = "";}
	imgs[0].style.marginLeft = ((largeur-imgs[0].offsetWidth)/2)+'px';
	imgs[0].style.marginTop = ((hauteur-imgs[0].offsetHeight)/2)+'px';
	imgs[0].xOpacity = .99;
  
    if(imgs[1].complete){
        setTimeout(so_xfade,6000);
    }else{setTimeout(SlideMe,200)}
    
  }else{setTimeout(SlideMe,200)}
}

la même chose avec onload:


var LoadImage = new Image();
LoadImage.src = imgs[0].src;

LoadImage.onload = function() {


        imgs[0].style.display = 'inline';
	  if(largeur<900){imgs[0].style.height = '300px';}
          else{imgs[0].style.height = "";}
	imgs[0].style.marginLeft = ((largeur-imgs[0].offsetWidth)/2)+'px';
	imgs[0].style.marginTop = ((hauteur-imgs[0].offsetHeight)/2)+'px';
	imgs[0].xOpacity = .99;
  
        var NextImage = new Image();
        NextImage.src = imgs[1].src;
          NextImage.onload = function() {
              setTimeout(so_xfade,6000);
          }
    
  }
}

beh ça marche pas sous IE, bizarre non?
Modifié par matmat (09 Jan 2007 - 21:19)
Essaie peut-être d'écrire le code dans cet ordre-là :
var img = new Image();
img.onload = function() {
   // Mon action
};
img.src = "img.jpg";
Il est possible que l'événement "load" se déclenche avant que tu ajoutes le gestionnaire d'événements.
Effectivement ça marche! Par contre je comprend pas du tout pourquoi, comment onload petit-il savoir si il est chargé si il ne sais pas encore ce que c'est comme image? Smiley langue , l'ordre me parait inversé...
Du coup dans le même ordre d'idée, tu penses que pour rajouter un loading a la gallerie js type tuto d'alsa il vaut mieux:


function Display(Link){
Tof = document.getElementById('photo');
Load = document.getElementById('loading');
Tof.src = Link.href;
Tof.style.display = "none";
Load.style.display = "inline";

   ImagesLoader=new Image();
   ImagesLoader.onload = function() {
            Load.style.display = "none";
            Tof.style.display = "inline";
   };
   ImagesLoader.src=Link.href;
}

que:

function Display(Link){
Tof = document.getElementById('photo');
Load = document.getElementById('loading');
Tof.src = Link.href;
Tof.style.display = "none";
Load.style.display = "inline";

          ImagesLoader=new Image();
          ImagesLoader.src=Link.href;
          checkload();
}

function checkload(){
   if(ImagesLoader.complete){
   Load.style.display = "none";
   Tof.style.display = "inline";
   }else{setTimeout('checkload()', 200);}
}

Je pense que ce serait pas mal soit dit en passant de la rajouter à la galerie, (si il est bon),parceque ça manque vraiment. Imaginons une conection un peu lente, l'utilisateur clique sur la vignette, il se passe rien! puis quelques secondes aprés, l'image aparait, pas trés intuitif!
Tandis qu'avec le loading, c'est déja beaucoup plus sympa.
Modifié par matmat (09 Jan 2007 - 21:46)
Je viens de regarder le script de lightbox qui a un loading est effectivement c'est fait exactement comme ça, d'abord onload puis l'assignation de la source. Avec une petit correction pour IE qui bug un peu et affiche l'ancienne image un peu avant la nouvelle Smiley langue donc il faut rajouter un truc comme ça:

setTimeout(function() {
                Load.style.display = "none";
                Tof.style.display = "inline";
},200);

ou la version de lightbox:


if (navigator.appVersion.indexOf("MSIE")!=-1){
			pause(250);
}


et plus loin:


function pause(numberMillis) {
	var now = new Date();
	var exitTime = now.getTime() + numberMillis;
	while (true) {
		now = new Date();
		if (now.getTime() > exitTime)
			return;
}
}

Modifié par matmat (09 Jan 2007 - 22:00)
Pourquoi ne pas faire une fonction qui fait appel à elle même avec en argument un compteur pour savoir quel image il doit afficher et laquelle il doit attendre. En testant à chaque fois si l'image suivante existe tu peux le faire repartir du début si tu est arrivé à la dernière image. Au chargement de la page tu appelles cette fonction à un compteur égal à 1 et voilà.

N.B. : J'ai beaucoup détaillé mais çà ne veut pas dire que je te prends pour un débutant ...

N.B. 2 : Si c'est déjà ce que tu proposes excuses-moi c'est juste que j'ai pas le temps de tout lire dans le détail.
Modifié par CNeo (09 Jan 2007 - 21:59)
Effectivement c'est un peu ce que j'avais fait au debut, mais comme je ne connaissez pas la fonction "complete", et que je trouve qu'elle fonctionne un peu bizarrement par moment (c'est peut-être moi qui bug un peu aussi, j'ai fait un overdose de js ces derniers temps), je voulais savoir si il existait d'autres méthodes.
matmat a écrit :
Effectivement ça marche! Par contre je comprend pas du tout pourquoi, comment onload petit-il savoir si il est chargé si il ne sais pas encore ce que c'est comme image? Smiley langue , l'ordre me parait inversé...
Ben non, c'est plutôt logique.

"onload" est juste un "capteur" qui doit te prévenir au moment où l'image est chargée. Il n'est pas gênant de l'ajouter avant de préciser quelle est l'image.
matmat a écrit :

Je pense que ce serait pas mal soit dit en passant de la rajouter à la galerie


Salut,

Olivier s'est déjà exprimé sur ce point, son script est une fonctionalité extrêmement utilisable du fait même de sa simplicité et il est sans doute bon qu'il reste ainsi. Puisque rien n'empêche quiconque de l'enrichir à loisir.

Je trouve effectivement ce raisonnement très juste. Il est très rare en fait de trouver un javascript parfaitement opérant et d'une telle limpidité. Un des contres exemples étant bien le script lightbox qui constitue un ensemble de fonctionalités très sophistiquées mais en même temps très "clés en main" et "boite noire" et où si on veut toucher quelque chose ben c'est très délicat.


Smiley lol Par contre ce serait très rigolo de faire un concours d'enrichissement du script initial d'Olivier. Avec comme règle du jeu :

. Droit à une seule fonctionnalité supplémentaire par concurrent
. Le script de départ doit être préservé
. Le résultat sera considéré dans le cadre d'une pondération entre utilité et imagination.
. MAIS !!! Quoiqu'il en soit, la proposition devra être en cohérence avec l'évolution inéluctable de notre paradigme sociétal vers WEB 2.0
Modifié par clb56 (09 Jan 2007 - 22:23)
a écrit :
Un des contres exemples étant bien le script lightbox qui constitue un ensemble de fonctionalités très sophistiquées mais en même temps très "clés en main" et "boite noire" et où si on veut toucher quelque chose ben c'est très délicat.


On a déja debattu sur ce point, mais je te conseil de regarder de prés le Lightbox v1, et tu verras ce n'est pas si "boite noire", le script fait seulement les fonction suivante:
1. il crée les elements neccessaires, liens et div aux images eu titres et au loading
2. il centre l'image dans la fenêtre (ce qui est peut-être le plus compliqué)
3. il cree le loading
4. il affiche l'image

Tu peux le lire dans tout les sens il n'y a rien de plus. Et c'est fonctions, le loading et le centrage c'est tout ce qui fait le charme de ce script.
Sujet clos
Aller à