顯示進度條而圖庫加載上django的模板

Question

我想顯示的進度條（或加載圖標）一圖像庫加載上django的模板而。 圖片庫是有模板一個div和該專區只應該出現的進度條。 請參考http://www.openstudio.fr/jquery/，因爲我正在使用此畫廊

Answer 1

最好的辦法可能是通過JavaScript來做到這一點，而不是試圖在Django做任何事情。你會讓Django填充你的JavaScript，然後讓JavaScript做你的進度條。我將使用jQuery UI爲progressbar。

Django的模板：

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> 

這也假設你有這樣的（-ish）HTML：

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

希望至少可以幫助你得到一些方向。