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

Question

我想在 django 模板上加载图片库时显示进度条（或加载图标）。 图片库在模板中有一个 div，对于该 div，只应显示进度条。 请参考 http://www.openstudio.fr/jquery/ 因为我正在使用这个画廊

Answer 1

最好的选择可能是通过 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>

希望这至少可以帮助您获得一些指导。