django - イメージ ギャラリーが django テンプレートにロードされている間、プログレス バーを表示する

Question

イメージ ギャラリーが django テンプレートに読み込まれている間、プログレス バー (または読み込みアイコン) を表示したいと考えています。画像ギャラリーにはテンプレートに div があり、その div には進行状況バーのみが表示されます。このギャラリーを使用しているので、 http://www.openstudio.fr/jquery/を参照してください。

Answer 1

おそらく最善の策は、Django で何かをしようとするのではなく、JavaScript を使用してこれを行うことです。Django に JavaScript を入力させてから、JavaScript にプログレス バーを実行させます。プログレスバーにはjQuery UIを使用します。

ジャンゴ テンプレート:

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>

少なくとも何らかの方向性を得るのに役立つことを願っています.