在页面加载Django时显示加载图像

时间:2015-08-26 03:29:47

标签: javascript jquery html css django

我是Django的新手,在一些基本的东西上需要一些帮助。我一直在寻找高低,但由于某种原因不能把它放在一起。我的用例是在视图中执行python脚本并在模板中显示结果。这必须在页面加载且没有任何用户操作时发生。虽然我能够以所需的格式(使用引导程序3)在模板中显示脚本输出,但是在脚本执行时我无法显示动画加载图像。以下是我有的Django视图

def home(request):
    plist = []
    cmd = '/opt/sh/try.sh'

    ## run it ##
    #p = subprocess.Popen(cmd, shell=True, stdout=subprocess.PIPE,  stderr=subprocess.PIPE)

    stdout = os.popen(cmd)

    for i in stdout:
        plist.append(i.rstrip())

    plist = plist[1:]
    clist = []
    cmd = '/opt/sh/list_directories.sh'
    stdout = os.popen(cmd)

    for i in stdout:
        clist.append(i.rstrip())

    #html = subprocess.check_output('/opt/sh/', shell='True')
    t = loader.get_template('runningscript/output.html')
    c= Context({'plist':plist,'clist':clist})
    return HttpResponse(t.render(c))

这需要大约15秒来处理。我尝试使用css-Jquery-html-javascirpt组合,但我无法使其工作。以下是我的模板。

    {% load staticfiles %}
    <link rel="stylesheet" type="text/css" href="{% static                       'css/custom.css' %}" />
    <html>
    <head>
    <title>Apache Processes</title>
   </head>
   <body>
    <div class="se-pre-con"></div>

    <script src="{% static 'js/modernizr.js' %}"></script>
    <script src="{% static 'js/jquery.min.js' %}"></script>
    <script src="{% static 'js/ajax.js' %}"></script>

        <h1>The list of processes are</h1>
        {% if plist %}
            <ul>
                {% for i in plist %}
                    <li>{{ i }}</li>
                {% endfor %}
            </ul>
        {% endif %}
        <h1>The list of Clusters are</h1>
        {% if clist %}
            <ul>
                {% for i in clist %}
                    <li>{{ i }}</li>
                {% endfor %}
            </ul>
        {% endif %}

    </body>
    </html>

JS:

 <script     src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.js"></script>

    // Wait for window load
    $(window).load(function() {
        // Animate loader off screen
        $(".se-pre-con").fadeOut("slow");
    });

CSS:

    .no-js #loader { display: none;  }
    .js #loader { display: block; position: absolute; left: 100px; top: 0; }
   .se-pre-con {
   position: fixed;
   left: 0px;
 top: 0px;
 width: 100%;
 height: 100%;
 z-index: 9999;
 background: url("images/Preloader_7.gif") 50% 50% no-repeat #fff;

感谢任何帮助

0 个答案:

没有答案