Diaporama avec nombreuses images

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

Invité · 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 ?

Invité · 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é

Invité · 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 ...

Invité · 02/08/2011, 15h41

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.

Invité · 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.

Diaporama avec nombreuses images

jQuery

Discussions similaires

Partager

Partager