[执行后端脚本时加载gif

Question

所以我有一个表单，当我提交它时，后端script.py在Django中执行。它进行一些统计分析，大约需要8秒钟，完成后，我将被重定向到下一页。因此，我一直试图找到一种在脚本执行时实现加载gif的方法，但是我的每一次努力都失败了。我在考虑使用AJAX和javascript onclick方法（甚至onsubmit），但他们没有用。

谢谢大家。

Answer 1

我在StackOverflow中找到了链接到js代码的这篇文章。基本上，在这段代码中，他正在检查身体是否装有东西。如果没有，那么他会显示一个加载页面，这可能会有所帮助。这里是链接Show loading image after click button and page load

function onReady(callback) {
    var intervalID = window.setInterval(checkReady, 1000);

    function checkReady() {
        if (document.getElementsByTagName('body')[0] !== undefined) {
        console.log(document.getElementsByTagName('body')[0]);
            window.clearInterval(intervalID);
            callback.call(this);
        }
    }
}

function show(id, value) {
    document.getElementById(id).style.display = value ? 'block' : 'none';
}

onReady(function () {
    show('page', true);
    show('loading', false);
});

body {
    background: #FFF url("http://i.imgur.com/KheAuef.png") top left repeat-x;
    font-family:"Brush Script MT", cursive;
}
h1 {
    font-size: 2em;
    margin-bottom: 0.2em;
    padding-bottom: 0;
}
p {
    font-size: 1.5em;
    margin-top: 0;
    padding-top: 0;
}
#page {
    display: none;
}
#loading {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100vw;
    height: 100vh;
    background-color: rgba(192, 192, 192, 0.5);
    background-image: url("http://i.stack.imgur.com/MnyxU.gif");
    background-repeat: no-repeat;
    background-position: center;
}

<div id="page">
     <h1>The standard Lorem Ipsum passage</h1>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="loading"></div>