Question

我想在django模板上加载图片库时显示进度条（或加载图标）。图库在模板中有一个div，对于该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>

希望能帮助你至少找到方向。

在django模板上加载图库时显示进度条

1 个答案: