Afficher la barre de progression pendant le chargement d'une galerie d'images sur le modèle django

Question

Je souhaite afficher une barre de progression (ou icône de chargement) pendant le chargement d'une galerie d'images sur le modèle django. La galerie d'images a une div dans le modèle et pour cette div seule la barre de progression devrait apparaître. S'il vous plaît se référer à http://www.openstudio.fr/jquery/ que j'utilise cette galerie

Answer 1

Votre meilleur pari est probablement de le faire via JavaScript au lieu d'essayer de faire beaucoup de choses dans Django. Vous auriez Django remplir votre JavaScript, puis avoir le JavaScript faire votre barre de progression. Je vais utiliser jQuery UI pour le progressbar.

Django Modèle:

var portfolio = { 
    image_count = {{ images|length }}, 
    images = [ 
     {% for image in images %}{ 
      'src': "{{ image.url }}", 
      'title': "{{ image.title }}" 
     }{% if not forloop.last %},{% endif %}{% endfor %} 
    ] 
}; 

JavaScript:

<script> 
    // This helps us keep track of the progress: 
    var count = 0; 
    var updateProgress = function() { 
     count++; 
     // Calculate the % we are through the images. 
     progress = parseInt((count/portfolio.image_count) * 100); 
     // Update the progressbar. 
     $("#progressbar").progressbar("value", progress); 
     // Check if we're done. 
     if (progress >= 100) { 
      $("#progressbar").hide(); 
      // Fire up the multimedia portfolio, per the OP. 
      $('#multimedia-portfolio').multimedia_portfolio({width: 800}); 
      $("#portfolio-cont").show(); 
     } 
    } 
    $(function() { 
     // Initialize the progressbar at 0%. 
     $("#progressbar").progressbar({value:0}); 
     // Hide the portfolio for now. 
     $('#portfolio-cont').hide(); 
     if (portfolio) { 
      // Loop over the images. 
      for (var i=0; i<portfolio.image_count; i++) { 
       var image = portfolio.images[i]; 
       // Create an image, a link, an li. 
       // Once the image is loaded, will call updateProgress. 
       var img = $('<img>').attr('src', image.src) 
        .attr('title', image.title) 
        .load(updateProgress); 
       var a = $("<a>").attr("href", image.src) 
        .addClass("thickbox"); 
       $(a).append(img); 
       var li = $("<li>").append(a); 
       // Append the li to the ul. 
       $('#multimedia-portfolio').append(li); 
      } 
     } 
    }); 
</script> 

Cela suppose aussi que vous avez ce (ish) HTML:

<div id="progressbar"></div> 
<div id="portfolio-cont"><ul id="multimedia-portfolio"></ul></div> 

espoir que vous aide à au moins obtenir une direction.