Показывать индикатор выполнения во время загрузки галереи изображений по шаблону django - PullRequest
Новая
       23

Показывать индикатор выполнения во время загрузки галереи изображений по шаблону django

3 голосов
/ 10 июня 2010

Я хочу отображать индикатор выполнения (или значок загрузки), пока галерея изображений загружается по шаблону django. Галерея изображений имеет div в шаблоне, и для этого div должен отображаться только индикатор выполнения. Пожалуйста, обратитесь к http://www.openstudio.fr/jquery/, поскольку я использую эту галерею

1 Ответ

1 голос
/ 10 июня 2010

Лучше всего сделать это с помощью JavaScript, а не пытаться делать что-либо в Django.Вы бы заставили Django заполнить ваш JavaScript, а затем сделать так, чтобы JavaScript выполнял ваш индикатор.Я буду использовать jQuery UI для индикатора выполнения .

Шаблон 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>

Надежда, которая поможет вам хотя бы получить какое-то направление.

...