Diaporama avec nombreuses images [Résolu]

tim1789 · 01/08/2011, 15h49

Je suis en train de sécher sur le problème suivant :
Je voudrais créer un diaporama comportant quelques milliers de photos, d'une taille comprises entre 200 et 600 KO. Ces photos sont stockées dans un sous répertoire du site. Il n'est évidemment pas question de charger l'ensemble des photos avant d'afficher la première photo.

Par une requête, j'obtiens un tableau comportant la liste de toutes les photos à afficher. Je pensais ensuite aller chercher et afficher ces photos séquentiellement, toutes les 4 ou 5 secondes par exemple. Bien sur, le temps de chargement est variable, à cause du débit variable et de la taille variable des photos.

Je pensais donc télécharger la photo n+1 pendant l'affichage de la photo n, cet affichage étant ajusté à 4 ou 5 secondes. Si, au bout de ce temps, la photo n+1 est chargée, on remplace la photo n par la n+1 et on charge la photo n+2...
Si la photo n+1 n'est pas totalement téléchargée, on maintient l'affichage de la photo n jusqu'au chargement complet de n+1. Alors seulement, on remplace la photo n par la n+1 et on charge la photo n+2...

J'ai déjà bien retourné cette question, rechercher une solution sur différents sites, regardé différents tutos (c'est vrai que jquery, je ne domine pas trop), mais j'ai besoin d'un coup de main. Merci

galerien69 · 02/08/2011, 13h07

salut,

Ca semble tourner chez moi

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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
 
<html>
    <head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
    <script type="text/javascript">
function debug(str){
  $('#junk')[0].innerHTML+=str+'</br>';
}
$(document).ready(function(){
 
  var currentImg = 0;//points on buycostumes
  var imgSources = [
   'http://images.buycostumes.com/mgen/merchandiser/12438.jpg?t=12',
   'http://bzzz.3dsbuzz.com/wp-content/uploads/2011/04/pokemon-logo.jpg',
   'http://images.cheezburger.com/completestore/2010/9/8/9688305c-53a1-403b-9e8f-3e13e7a68428.jpg'
  ];
  var imgBuffered = false;//buffered image has been loaded
  var inTempo=false;//if true, we musn't call swapImage.
  var tempo = 5;//wait for 5seconds before trying to swapImage
 
  //image must have been buffered, tempo must have been elapsed
  //
  //show the hidden image instead of the current one
  //bufferize a new image
  //arm the tempo : 
  // if image has been buffered call swapImage
  // otherwise let the callback of img loaded call swapImage
  function swapImage(){
    inTempo = true;
    debug('swapping '+$('#buffImg').attr('src'));
    $('#img').attr('src', $('#buffImg').attr('src'));
    bufferize();
    window.setTimeout(function(){
      if(!imgBuffered){
        //we DO are waiting for the callback to swap image
        inTempo=false;
      }else{
         debug('five seconds elapsed');
         swapImage();
      }
    }, tempo*1000);
  }
  function bufferize(){
    imgBuffered = false;
    if(currentImg<imgSources.length){
      var imgToBuffer=imgSources[currentImg++];
      debug('loading '+imgToBuffer);
      $('#buffImg').attr('src', imgToBuffer);
    }else{
      //no more image to load
    }
  }
  $('#buffImg').load(function(){
    debug('img loaded '+inTempo);
    imgBuffered  = true;
     if(!inTempo){
        swapImage();
     }else{
       debug('loaded but not 5seconds elapsed');
     }
  });
 
  //begins the stuff
  bufferize();
 
 
});
</script>
	</head>
    <body>
    <img id="img" style="width:200px; height:200px"src="no" />
    <img id="buffImg" style="display:none" src=""/>
    <!-- remove me -->
    <div id="junk"></div>
    </body>	
</html>

jpeux étayer si besoin, sinon c'est dans le code.

edit : jai appliqué ton algo: ne charger une nouvelle image que lorsqu'on affiche celle bufferisée. Changer d'image au minimum toutes les 5 secondes. Des qu'une nouvelle est chargée le cas le cas échéant.

SpaceFrog · 02/08/2011, 13h22

tu connais lazyload de jquery ?

galerien69 · 02/08/2011, 13h53

Je suis en train de regarder. Connaissais pas. En tout cas, ils en ont un côté serveur XD.

Bon, en attendant j'en ai fait un plugin.
bufferize.js

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
53
54
(function($){
  $.fn.bufferize = function(options){
    var o = $.extend({
      tempo:5,
      swapImg:changeImg
    }, options);
    var hiddenImg;
    var img;
    var currentImg = 0;
    var imgBuffered = false;//buffered image has been loaded
    var inTempo=false;//if true, we musn't call swapImage.
    function changeImg(node, imgName){
      node.attr('src', imgName);
    }
    //image must have been buffered, tempo must have been elapsed
    //
    //show the hidden image instead of the current one
    //bufferize a new image
    //arm the tempo : 
    // if image has been buffered call swapImage
    // otherwise let the callback of img loaded call swapImage
    function swapImage(){
      inTempo = true;
      o.swapImg(img, hiddenImg.attr('src'));
      bufferize();
      window.setTimeout(function(){
        if(!imgBuffered){
          //we DO are waiting for the callback to swap image
          inTempo=false;
        }else{
           swapImage();
        }
      }, o.tempo*1000);
    }
    function bufferize(){
      imgBuffered = false;
      if(currentImg<o.imgs.length){
        hiddenImg.attr('src', o.imgs[currentImg++]);
      }
    }
    return this.each(function(){
      img = $(this);
      $(this).after($('<img>'));
      hiddenImg = $(this).next().hide();
      hiddenImg.load(function(){
        imgBuffered  = true;
         if(!inTempo){
            swapImage();
         }
      });
      bufferize();
    });
  }
})(jQuery);

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
<html>
    <head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
    <script type="text/javascript" src="bufferize.js"></script>
    <script type="text/javascript">
$(document).ready(function(){
  var imgSources = [
   'http://images.buycostumes.com/mgen/merchandiser/12438.jpg?t=12',
   'http://bzzz.3dsbuzz.com/wp-content/uploads/2011/04/pokemon-logo.jpg',
   'http://images.cheezburger.com/completestore/2010/9/8/9688305c-53a1-403b-9e8f-3e13e7a68428.jpg'
  ];
  var imgSources2 = imgSources.slice(0).reverse();
  //begins the stuff
  $('#img').bufferize({
    imgs:imgSources,
    tempo:3
  });
 
  $('#img2').bufferize({
    imgs:imgSources2,
    tempo:4,
    swapImg:function(node, imgName){
        node.fadeOut(function(){
        node.attr('src', imgName);
        node.fadeIn();
      });
    }
  });
});
</script>
	</head>
    <body>
    <img id="img" style="width:200px; height:200px" src="no" />
    <img id="img2" style="width:200px; height:200px" src="no" />
    </body>	
</html>

Bovino · 02/08/2011, 14h29

Ca me semble un peu compliqué alors que l'utilisation de l'événement load d'une image serait plus approprié

galerien69 · 02/08/2011, 14h35

ben la question c'est un peu plus que détecter le load d'une image.
C'est de rafraichir le stuff et de bufferiser une image.

Note : j'utilise load.

Je viens de regarder lazyload, je ne crois pas qu'il y ait un rapport avec une tempo de rafraichissement/buffering des images.

SpaceFrog · 02/08/2011, 14h55

avec lazyload le load de l'image se fait uniquement en cas de besoin ...

galerien69 · 02/08/2011, 15h41

Citation:

Lazy loader is a jQuery plugin written in JavaScript. It delays loading of images in (long) web pages. Images outside of viewport (visible part of web page) wont be loaded before user scrolls to them

tim1789 · 02/08/2011, 16h58

Merci pour ces réponses. J'ai adapté la page de Galerien (un peu du moldave pour moi) à mon site et j'ai commencé à tester. J'ai cru que c'était bon, à ceci près que tout se bloquait à la 40ième image. Et puis, j'ai effacé le cache du navgateur, histoire de voir ce qu'un nouvel utilisateur verra, blocage à la première photo.

Je suis tombé sur un autre point qui me laisse vraiment perplexe. J'ai développé une première version (sans la solution de Galerien) qui marchait pas terrible sur mon fai, sfr pour ne pas le nommer. J'avais attribué à sfr les temps de chargement un peu trop longs. Je viens d'implanter cette même version sur un serveur dédié en pensant que ces points s'arrangeraient en y mettant les moyens. Surprise, le temps de chargement est beaucoup plus long pour les mêmes photos sur le serveur dédié.

OK, le débit que j'ai au fond de ma campagne n'est pas super, 3,65 Mbps en réception, mais ça devrait suffire pour descendre une photo de 200 kO en moins d'une seconde.

Donc, un point de plus à creuser, je crois qu'on va parler de tout ceci avec mon hébergeur. A suivre.

galerien69 · 02/08/2011, 17h06

byzarre.

chez moi ca marche sous ff5 et chromium 12.x
Bon après, si c'est IE, ca marche surement pas

.

tim1789 · 02/08/2011, 21h43

Le plugin de Galerien semble fonctionner correctement avec mon hébergement sfr sur chrome ff opera et safari, pas sous ie (normal), mais je n'ai pas eu le temps de vérifier. Peut être est-ce dans ma partie qu'il y a quelque chose qui ne convient pas pour ie. J'ai même poussé la méchanceté jusqu'à faire tourner les 4 browsers en même temps avec une tempo de 2 secondes. Sur chacun, les photos changent à un rythme de l'ordre de 1 toutes les 4 secondes.

Je ne pense pas que lazzy loader puisse être une solution sur ce type de fonctionnement.

Reste la question de mon hébergement sur serveur dédié, mais c'est une autre affaire.

Merci pour cette excellente solution qui répond exactement à la question posée.

01/08/2011, 15h49	#1
tim1789 Futur Membre du Club Inscription : mai 2007 Messages : 61 Détails du profil Informations forums : Inscription : mai 2007 Messages : 61 Points : 15 Points : 15	Diaporama avec nombreuses images Je suis en train de sécher sur le problème suivant : Je voudrais créer un diaporama comportant quelques milliers de photos, d'une taille comprises entre 200 et 600 KO. Ces photos sont stockées dans un sous répertoire du site. Il n'est évidemment pas question de charger l'ensemble des photos avant d'afficher la première photo. Par une requête, j'obtiens un tableau comportant la liste de toutes les photos à afficher. Je pensais ensuite aller chercher et afficher ces photos séquentiellement, toutes les 4 ou 5 secondes par exemple. Bien sur, le temps de chargement est variable, à cause du débit variable et de la taille variable des photos. Je pensais donc télécharger la photo n+1 pendant l'affichage de la photo n, cet affichage étant ajusté à 4 ou 5 secondes. Si, au bout de ce temps, la photo n+1 est chargée, on remplace la photo n par la n+1 et on charge la photo n+2... Si la photo n+1 n'est pas totalement téléchargée, on maintient l'affichage de la photo n jusqu'au chargement complet de n+1. Alors seulement, on remplace la photo n par la n+1 et on charge la photo n+2... J'ai déjà bien retourné cette question, rechercher une solution sur différents sites, regardé différents tutos (c'est vrai que jquery, je ne domine pas trop), mais j'ai besoin d'un coup de main. Merci
	00

02/08/2011, 13h22	#3
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 021 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 021 Points : 45 117 Points : 45 117	tu connais lazyload de jquery ? __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

02/08/2011, 14h29	#5
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 807 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 807 Points : 35 797 Points : 35 797	Ca me semble un peu compliqué alors que l'utilisation de l'événement load d'une image serait plus approprié __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

02/08/2011, 14h55	#7
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 021 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 021 Points : 45 117 Points : 45 117	avec lazyload le load de l'image se fait uniquement en cas de besoin ... __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

02/08/2011, 14h35	#6
galerien69 Membre éclairé F5(){F5} Inscription : avril 2008 Messages : 256 Détails du profil Informations personnelles : Sexe : Localisation : France, Rhône (Rhône Alpes) Informations professionnelles : Activité : F5(){F5} Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : avril 2008 Messages : 256 Points : 320 Points : 320	ben la question c'est un peu plus que détecter le load d'une image. C'est de rafraichir le stuff et de bufferiser une image. Note : j'utilise load. Je viens de regarder lazyload, je ne crois pas qu'il y ait un rapport avec une tempo de rafraichissement/buffering des images.
	00

02/08/2011, 16h58	#9
tim1789 Futur Membre du Club Inscription : mai 2007 Messages : 61 Détails du profil Informations forums : Inscription : mai 2007 Messages : 61 Points : 15 Points : 15	Merci pour ces réponses. J'ai adapté la page de Galerien (un peu du moldave pour moi) à mon site et j'ai commencé à tester. J'ai cru que c'était bon, à ceci près que tout se bloquait à la 40ième image. Et puis, j'ai effacé le cache du navgateur, histoire de voir ce qu'un nouvel utilisateur verra, blocage à la première photo. Je suis tombé sur un autre point qui me laisse vraiment perplexe. J'ai développé une première version (sans la solution de Galerien) qui marchait pas terrible sur mon fai, sfr pour ne pas le nommer. J'avais attribué à sfr les temps de chargement un peu trop longs. Je viens d'implanter cette même version sur un serveur dédié en pensant que ces points s'arrangeraient en y mettant les moyens. Surprise, le temps de chargement est beaucoup plus long pour les mêmes photos sur le serveur dédié. OK, le débit que j'ai au fond de ma campagne n'est pas super, 3,65 Mbps en réception, mais ça devrait suffire pour descendre une photo de 200 kO en moins d'une seconde. Donc, un point de plus à creuser, je crois qu'on va parler de tout ceci avec mon hébergeur. A suivre.
	00

02/08/2011, 17h06	#10
galerien69 Membre éclairé F5(){F5} Inscription : avril 2008 Messages : 256 Détails du profil Informations personnelles : Sexe : Localisation : France, Rhône (Rhône Alpes) Informations professionnelles : Activité : F5(){F5} Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : avril 2008 Messages : 256 Points : 320 Points : 320	byzarre. chez moi ca marche sous ff5 et chromium 12.x Bon après, si c'est IE, ca marche surement pas .
	00

02/08/2011, 21h43	#11
tim1789 Futur Membre du Club Inscription : mai 2007 Messages : 61 Détails du profil Informations forums : Inscription : mai 2007 Messages : 61 Points : 15 Points : 15	Le plugin de Galerien semble fonctionner correctement avec mon hébergement sfr sur chrome ff opera et safari, pas sous ie (normal), mais je n'ai pas eu le temps de vérifier. Peut être est-ce dans ma partie qu'il y a quelque chose qui ne convient pas pour ie. J'ai même poussé la méchanceté jusqu'à faire tourner les 4 browsers en même temps avec une tempo de 2 secondes. Sur chacun, les photos changent à un rythme de l'ordre de 1 toutes les 4 secondes. Je ne pense pas que lazzy loader puisse être une solution sur ce type de fonctionnement. Reste la question de mon hébergement sur serveur dédié, mais c'est une autre affaire. Merci pour cette excellente solution qui répond exactement à la question posée.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email