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.

Diaporama avec nombreuses images

jQuery

Vue hybride

Discussions similaires

Partager

Partager